6 Replies Latest reply on May 2, 2011 6:55 AM by Aage Nielsen

    Using jquery with richfaces 4

    Aage Nielsen Newbie

      We need to copy the input from one h:inputText to another. One solution is to use something like

       

      function copyInput() {

        jQuery('#targetinput').text(jQuery('#sourceinput').val())

      }

       

      ...

      ...

       

      <h:inputText id="sourceinput" value="#{mybean.x}"/>

      <h:inputText id="targetinput" value="#{mybean.y}"/>

      <rich:jQuery query="copyInput()" event="keyup" selector="#sourceinput"/>

      ...

      ...

       

      but how to use the jquery from richfaces ? the rich:jQuery works fine the copyInput function is called on every keyup stroke. We have tried jQuery.noConflict(), <h:outputscript src="jquery.js"/>, using ${}.

       

      best regards

      aage

        • 1. Using jquery with richfaces 4
          Lu Han Newbie

          Don't use <h:outputscript src="jquery.js"/>, since richfaces has include it. You can check it from framework.pack.js.jsf

           

          My machine's is: /iview/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js.jsf

           

          And, if you defined  jQuery.noConflict(), please make clear that jQuery has give up using $

          • 2. Using jquery with richfaces 4
            Aage Nielsen Newbie

            hi,

             

            well we use Richfaces 4 and something has changed since 3.3.3. We know is pretty basic (to use jquery) but isn't simple selection jQuery('#mybean') supposed to work ? And yes we know the formid is prefixed ;-) Does anybody have a really simple example ?

             

            best regards

            aage

            • 3. Using jquery with richfaces 4
              Lu Han Newbie

              Hi Aage,

              Firstly, what I said is the machanism of shipping js files into richfaces, not only richfaces3.3.3 use it, but also 4.0.final

              Second, your assumption is right, the component id is form_id:component_id. Additionally, you can use jQuery's all ability in richfaces project, the both framework can work together well.

              The simple you can get from jQuery offical site and run it in your xhtml file, that would run well

               

              The only thing you need to take care is do not use $ -- replace it by jQuery.

               

              And, you need to know richfaces4.0 includes jQuery1.5.x, and richfaces3.3.3 includes jQuery1.3.2.

              So, please doesn't include the jQuery.js file explicitly, and if you include the version of jQuery is not the same one of richfaces use, it will encounter conflict.

               

              Wish you can master it soon.

               

              BR,

              Lu H.

              • 4. Using jquery with richfaces 4
                Nick Belaevski Master

                I suggest to try this:

                 

                jQuery(#{rich:element('inputId')}).

                • 5. Using jquery with richfaces 4
                  Lu Han Newbie

                  Yes! It's convenient to use jQuery(#{rich:element('inputId')}) to select the component. In this way, the selection just uses the component's id (no prefix).

                  • 6. Using jquery with richfaces 4
                    Aage Nielsen Newbie

                    That fixed it - our example ended with:

                     

                                <h:form id="qwerty">

                                    <h:outputText value="Field to copy:" />

                                    <h:inputText id="a1" value="#{simple.name}"/>

                                    <h:inputText id="a2" />

                                    <script>function copy(e){

                                        jQuery(#{rich:element('a2')}).val(jQuery(#{rich:element('a1')}).val());

                                    }</script>

                                    <rich:jQuery query="copy(event)" event="keyup" selector="#a1"/>

                                </h:form>

                     

                    Thanks !

                    aage