10 Replies Latest reply on May 14, 2010 9:02 AM by radu321

    How to set the value of a input using rich:JQuery

    radu321

      Hi ,

       

      I am trying to set the value of an input on onchange event of a combo box using rich:jquery.

       

      Bassicaly this is how i try to do it:

       

       

      <rich:jQuery timing="onJScall" name="testD" selector="#myInput" query="val('test')" />
      
      <h:selectOneMenu id="myCombo" value="#{bean1.val}" onchange="testD(this)">  
        <f:selectItem itemLabel="#{m.no}" itemValue="false" />
        <f:selectItem itemLabel="#{m.yes}" itemValue="true" />
        <a4j:support event="onchange"  reRender="myInput" ajaxSingle="true" />
      </h:selectOneMenu>
      
      <h:inputText id="myInput" value="#{bean2.val}" />

       

      So if user changes the value in combobox the 'test' value will occurs as value for "myInput" , could this be done in this way ? (without using beans, only at view layer)

       

      Please if you have an idea , help me.

       

      Thanks,

      Radu

        • 1. Re: How to set the value of a input using rich:JQuery
          ilya_shaikovsky
          <h:inputText id="input"/>
          <h:outputText value="Enter you interests:"/>
          <h:inputTextarea/>
          <h:outputText value="Choose your favourite color"/>
          <h:selectOneMenu onchange="#{rich:element('input')}.value='test'">
          <f:selectItem itemLabel="Red" itemValue="0"/>
          <f:selectItem itemLabel="Black" itemValue="1"/>
          <f:selectItem itemLabel="Green" itemValue="2"/>
          <f:selectItem itemLabel="White" itemValue="3"/>
          </h:selectOneMenu>
          

           

          but as you added support to select - you should move js call from onchange of select to onsubmit of support as both support and on* attribute should not be used in the same time.

          1 of 1 people found this helpful
          • 2. Re: How to set the value of a input using rich:JQuery
            radu321

            Hi ,

             

            Thank you for your fast reply.

             

            I succesfully introduced this part into the project, but behavior needs to be improved.

             

            So only when user selects "Yes" from  <h:selectOneMenu> , "test" value should occur as value for "myInput", in this case "test" occurs all the time, regardless combo box selection.

             

            I tryed to solved this using this code:

             

             

            <h:selectOneMenu id="myCombo" value="#{bean1.val}">  
              <f:selectItem itemLabel="#{m.no}" itemValue="false" />
              <f:selectItem itemLabel="#{m.yes}" itemValue="true" />
              <a4j:support event="onchange" onsubmit="#{rich:element('myInput')}.value='test'" reRender="myInput" 
              ajaxSingle="true" />
            </h:selectOneMenu>
            
            <h:inputText rendered="#{bean1.val == false or bean1.val == null}" id="myInput" value="#{bean2.val}" />
            
            

             

            At first view this is the right bevavior, but when the combo box is set on "Yes", bean1.val is true and on page there are validation errors when entire page is rendered the "myInput" controls is missing because of "rendered" condition.

             

            In this case for me  a "reRendered" property for <h:inputText> would be wonderful , but only would be .

             

            Please if you have an idea about how this can be done give me a hand...

             

            Regards,

            Radu

            • 3. Re: How to set the value of a input using rich:JQuery
              ilya_shaikovsky

              hey, if you changing the rendered property accroding to select component value - move the input value changing logic to the server side also - e.g. sevect component value change listener.. I do not see reasons to operate with the input value at client side while ajax request used anyway on selection. Or missing something?

              • 4. Re: How to set the value of a input using rich:JQuery
                radu321

                Thanks for reply.

                 

                Yes since there are ajax requests there, things can be done on server side but i must implement this only at view layer without any changes on java classes.

                 

                Right now i use this code, which seems to be best for me until now:

                 

                <h:selectOneMenu id="myCombo" value="#{bean1.val}">  
                  <f:selectItem itemLabel="#{m.no}" itemValue="false" />
                  <f:selectItem itemLabel="#{m.yes}" itemValue="true" />
                  <a4j:support event="onchange" onsubmit="#{rich:element('myInput')}.value='test'" reRender="myInput" 
                  ajaxSingle="true" />
                </h:selectOneMenu>
                
                <h:inputText rendered="#{bean1.val == false or bean1.val == null}" id="myInput" value="#{bean2.val}" />
                <h:inputText rendered="#{bean1.val == true}" id="myCopyInput" value="#{bean2.val}" />
                
                
                
                
                
                

                 

                I made a copy of that input which will appear if bean1.val is set to true and are validation erros on page, any way i am still suspicious about this solution because after copy input is rendered the mechanism stops working as far as i see... and also for its posibile side effects.

                 

                 

                Regards,

                Radu

                • 5. Re: How to set the value of a input using rich:JQuery
                  mpickell

                  Is this close to what you are trying to do?

                   

                  This sets up an onchange event on the select component after page loads.  When the component value changes,

                  if the value is true then the input is set to 'test';

                   

                   

                  <rich:jQuery timing="onload" selector="#myCombo" query="
                  change(
                       function(){
                            if ($(this).val() == true) {
                                 $('#myInput').val('test');
                            }
                       }
                  )"
                  />
                  1 of 1 people found this helpful
                  • 6. Re: How to set the value of a input using rich:JQuery
                    radu321

                    Hi,

                     

                    Thanks for reply and for your helpful example.

                     

                    Yes, it is.

                    The only thing i was wodering is why jQuery has timing set on "onload" insetead of "onJScall", because timing is set on "onload"  this query is runnig only once ? or it is running everytime user changes combo box selection (that should be) ?

                     

                    Also i am getting a javascript error "Object doesn't support this property or method" and i never saw 'test' value on "myInput". (i was running it using timing="onload")

                     

                    (i am using only richfaces 3.3.2 jars, nothing else related to jQuery libraries)

                     

                    I will keep trying to improving it may be it will lead me to the right solution.

                     

                    Regards and thanks,

                    Radu

                    • 7. Re: How to set the value of a input using rich:JQuery
                      mpickell

                      This script sets up the 'onchange' event for the select component onload.  You only need to set that event up one time.  After that, the code is triggered on each 'onchange' event.

                       

                      It is doing the same as defining it the way you had it with the 'onJSCall', and then calling that function using the name in the onchange attribute.  the onJSCall method uses the DOM Level 0 event model and the method I described uses the DOM Level 2 event model.  but you could do it either way.

                       

                      as for your javascript error, it is probably because of JSF ids.  The input is not '#myInput' but is actually "#SomeForm:myInput".  So you could try adding a styleclass to your '#myInput' called "myInputStyleClass" and then change my script to use a class selector instead:

                       

                      <rich:jQuery timing="onload" selector="#myCombo" query="
                      change(
                           function(){
                                if ($(this).val() == true) {
                                     $('.myInputStyleClass').val('test');
                                }
                           }
                      )"
                      />
                      • 8. Re: How to set the value of a input using rich:JQuery
                        radu321

                        Thank you very much for your explanations, i understood how "onload" is used.

                         

                        I tryed to run this example having the following code:

                         

                         

                        <h:inputText id="myInput" value="aaa" styleClass="myInputStyleClass" />
                        <h:selectOneMenu id="myComboBox" value="#{bean.boolVal}">
                            <f:selectItem itemLabel="#{m.n}" itemValue="false" />
                            <f:selectItem itemLabel="#{m.y}" itemValue="true" />
                        </h:selectOneMenu>
                        
                        <rich:jQuery timing="onload" selector="#myComboBox" query="change(
                          function(){ 
                           if ($(this).val() == true) {
                            $('.myInputStyleClass').val('test');
                           }
                          }
                        )"  />
                        

                         

                        Running it in this version the javascript error "Object doesn't support this property or method" still occurs.(when i change selection in combo box)

                         

                        After removing

                         

                        if ($(this).val() == true) 
                        

                         

                        condtion and additionals { } the first javascript error is gone but another is raised saying "null is 'null' or not an object", when i change selection in combo box.

                         

                        I am not sure if only rich faces jars (3.3.2) had support for this jQuery implementatios like using "$" and other methods (may be some jQuery libraries are nedded), this could be one reason why this is not working in my opinion.

                         

                        Regards,

                        Radu

                        • 9. Re: How to set the value of a input using rich:JQuery
                          mpickell

                          Sorry, I am writing the script without testing it anywhere...

                           

                          Change your "$" in the script to "jQuery" so it doesn't conflict with the prototype library.

                           

                          <rich:jQuery timing="onload" selector="#myCombo" query="
                          change(
                               function(){
                                    if (jQuery(this).val() == true) {
                                         jQuery('.myInputStyleClass').val('test');
                                    }
                               }
                          )"
                          />
                          • 10. Re: How to set the value of a input using rich:JQuery
                            radu321

                            Thanks again for your reply was really helpful .

                             

                            No problems .

                             

                            This is the entire working code:

                             

                             

                            <h:inputText id="myInp" value="aaa" styleClass="myInputStyleClass" />
                            <h:selectOneMenu id="myComboBox" value="#{bean1.val}">
                              <f:selectItem itemLabel="#{m.n}" itemValue="false" />
                              <f:selectItem itemLabel="#{m.y}" itemValue="true" />
                            </h:selectOneMenu>
                            <rich:jQuery timing="onload" selector="#myComboBox" query="change(
                               function(){ 
                               if (jQuery(this).val() == 'true') {
                                jQuery('.myInputStyleClass').val('test');
                               }
                               else {
                                jQuery('myInputStyleClass').val('');
                              }
                             }
                             )"  />
                            

                             

                            Only  (jQuery(this).val() == 'true') was changed true -- > 'true' seems that is returned as a string from js.

                             

                            Finally it worked.

                             

                             

                            Regards and many thanks for helping,

                            Radu