2 Replies Latest reply on Apr 29, 2009 8:16 AM by Kerdudou Ronan

    How to use the jQuery funtion?

    Thai Dang Vu Apprentice

      I'm using RF 3.3.0.GA. This is the xhtml page:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
      <head>
       <script type="text/javascript" src="js/jquery.corners.js"></script>
       <script type="text/javascript">
       //<![CDATA[
       function makeRoundedJs() {
       alert("Hi there!");
       jQuery(".rounded").corners();
       }
       //]]>
       </script>
      </head>
      <body style="background-color: #8833FF;">
      <f:view>
      <h:panelGroup layout="block" styleClass="rounded {9px}" id="id1"
       style="padding: 9px; background-color: #FFEEAA; width: 400px; border: 1px solid red;
       margin: 0 auto;">
       This is the home.<br/>
       <a4j:form>
       <a4j:commandLink value="Click here" action="#{nothing.doNothing}" onclick="makeRoundedJs();"/>
       <h:outputText value=" to do nothing in the log file."/>
       </a4j:form>
      </h:panelGroup>
      
      <rich:jQuery query="corners()" selector=".rounded" timing="onload"/>
      </f:view>
      </body>
      </html>
      

      The corners() method will make div's corners rounded. If I have the <rich:jQuery> tag at the end of the page, then the div's have rounded corners. But if I don't, and click on the <a4j:commandLink> to call a javascript function which in turn calls jQuery(".rounded").corners(), then I don't see any visual change in the div's corners.

      Could anybody give me an example of using the jQuery() function in Javascript please?

        • 1. Re: How to use the jQuery funtion?
          Nick Belaevski Master

          Hello,

          I guess the problem happens because jQuery script itself isn't loaded on the page. Add

          <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />


          • 2. Re: How to use the jQuery funtion?
            Kerdudou Ronan Apprentice

            just a remark, because i had a bug with this...

            if you use the load strategy ALL, then jQuery is automatically included and the line

            <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />

            will cause a problem (i think some king of internal plugins to jQuery are lost...)

            I use jQuery in my scripts and when i'm in dev mode i change the load strategy to be able to see readable javascript when debugging.

            so to force the inclusion of jQuery i prefer using :
            <!-- <rich:jQuery selector="document" query="ready(function(){ })"/> -->
            in the head. this way, no more problems.