2 Replies Latest reply on Dec 29, 2011 11:03 AM by agey

    How to use variables defined in a jQuery component in another jQuery component

    agey
    agey Dec 28, 2011 10:30 AM

      Hi,

       

      I have two input text in a xhtml page. I want to write into them by a virtual keyboard. The virtual keyboard writes the value selected by user into a input text. The problem is to know in what input text component must write the value.

       

      I have defined a jQuery component that is invoked when a input text is focused, to store the object focused into a variable. Then, in another jQuery component I define a function when keyboard is clicked, that writes the value into input text component stored in the variable defined into first component. This is my code:

       

      <rich:jQuery selector="#value1 input" event="focus" query="

                  var inputFocused= jQuery(this);

      " />

       

      <rich:jQuery selector="#keyboard span[id*=value]" event="click" query="

          inputFocused.val(jQuery(this).attr('value'));

      "/>

       

      It doesn´t work. It return that inputFocused isn´t defined. How could I know the last input text component was focused to write the value in it?

       

      Thanks a lot in advance,

        • 1. Re: How to use variables defined in a jQuery component in another jQuery component
          mcmurdosound
          mcmurdosound Dec 28, 2011 10:51 AM (in response to agey)

          I've never used rich:jQuery, but plain old jQuery or javascript. Please use firebug and take a look into the generated html code. Maybe this helps to understand what rich:jQuery generates.

           

          I think your variable is not initialized then it is accessed. You should declare it somewhere else - outside of your rich:jQuery tag.

           

          Another thing to analyse is the reRendering behavior. What happens if a rich:jQuery tag is rerendered? I think it'll be overwritten.

           

          You should also keep in mind that rerendering something that has an jquery event bound will loose this eventlistener unless you use somethink like jQuery.live or on.

            • Actions
          • 2. Re: How to use variables defined in a jQuery component in another jQuery component
            agey
            agey Dec 29, 2011 11:03 AM (in response to mcmurdosound)

            Hi Christian,

             

            Thanks for your replay. In the end I solved it using a InputHidden to save the id of the focused element.

             

            <div id="value1"  class="span-9">

                    <h:inputText id="value1Input" value="#{managedBean.value1}"/>

            </div>

             

            <div id="value2"  class="span-9 last">

                    <h:inputText id="value2Input" value="#{managedBean.value2}"/>

            </div>

             

            <div id="focusId"  class="span-8">

                 <h:inputHidden id="focusIdInput" value="value1"/>

            </div>

             

            <rich:jQuery selector="#value1 input" event="focus" query="

                        var id = jQuery(this).attr('id');

                        $('#focusId input').val(id);

            " />

             

            <rich:jQuery selector="#value2 input" event="focus" query="

                        var id = jQuery(this).attr('id');

                        $('#focusId input').val(id);

            " />

             

            <rich:jQuery selector="#keyboard span[id*=value]" event="click" query="

                     var id = $('#focusId input').attr('id');

            "/>

             

            As you say, rerender the input value makes loose the eventlistener but I solved it using another inputHidden as aux to render the value and then synchronize values with another input.

             

            Could someone point to me if this is a good solution or if there is another way to do it better?

             

            Thanks,

              • Actions