6 Replies Latest reply on Nov 19, 2010 4:16 AM by Ilya Shaikovsky

    Using a4j:support 's onchange event with h:selectOneMenu

    wqe wqe Newbie

      <h:selectOneMenu id="selectOneMenu"  value="#{Bean1.val1}" >
          <f:selectItems value="#{Bean1.selectItems}"/>
          <a4j:support event="onchange" action="#{Bean1.onSelectOneMenuChange}" reRender="textbox1 , textbox2 , textbox3, textbox4"  />
      </h:selectOneMenu>

      <h:inputText id="textbox1" value="#{Bean1.textbox1}"> </h:inputText>
      <h:inputText id="textbox2" value="#{Bean1.textbox2}"> </h:inputText>
      <h:inputText id="textbox3" value="#{Bean1.textbox3}"> </h:inputText>
      <h:inputText id="textbox4" value="#{Bean1.textbox4}"> </h:inputText>

       

      Bean1.onSelectOneMenuChange() will change the value of Bean1.textbox1 , Bean1.textbox2,Bean1.textbox3 and Bean1.textbox4  depending on the value selected (Bean1.val1) .Sometimes , it will change all the textbox value and sometimes it will only changes some textbox value.


      When users change the value in the "selectOneMenu" drop down list control , the JSF framework will not call the update model values phase  but call the Bean1.onSelectOneMenuChange() directly.  After that , the all the textbox are reRender. Because the update model values phase  is not called , the values entered by the user is never set the the Bean1 and the original value is shown in the textbox after reRender . (The value enter by the user will disappear )

      So I want to ask:

       

      1. How can I manually call the update model values phase inside Bean1.onSelectOneMenuChange() ?How can I get the value input input by the users inside Bean1.onSelectOneMenuChange() and set it to the corresponding fields of the Bean1 ?

       

      2.Another approach is that only reRender those textbox whose values are updated inside the Bean1.onSelectOneMenuChange() .However , there are many cases . For example , a value will change all the textbox value and a values may only change some textbox value.How can I reRender conditionally ?  What method is more prefer for maintainability?

        • 1. Re: Using a4j:support 's onchange event with h:selectOneMenu
          wqe wqe Newbie

          wqe wqe wrote:

           

          <h:selectOneMenu id="selectOneMenu"  value="#{Bean1.val1}" >
              <f:selectItems value="#{Bean1.selectItems}"/>
              <a4j:support event="onchange" action="#{Bean1.onSelectOneMenuChange}" reRender="textbox1 , textbox2 , textbox3, textbox4"  />
          </h:selectOneMenu>

          <h:inputText id="textbox1" value="#{Bean1.textbox1}"> </h:inputText>
          <h:inputText id="textbox2" value="#{Bean1.textbox2}"> </h:inputText>
          <h:inputText id="textbox3" value="#{Bean1.textbox3}"> </h:inputText>
          <h:inputText id="textbox4" value="#{Bean1.textbox4}"> </h:inputText>

           

          Bean1.onSelectOneMenuChange() will change the value of Bean1.textbox1 , Bean1.textbox2,Bean1.textbox3 and Bean1.textbox4  depending on the value selected (Bean1.val1) .Sometimes , it will change all the textbox value and sometimes it will only changes some textbox value.


          When users change the value in the "selectOneMenu" drop down list control , the JSF framework will not call the update model values phase  but call the Bean1.onSelectOneMenuChange() directly.  After that , the all the textbox are reRender. Because the update model values phase  is not called , the values entered by the user is never set the the Bean1 and the original value is shown in the textbox after reRender . (The value enter by the user will disappear )

          So I want to ask:

           

          1. How can I manually call the update model values phase inside Bean1.onSelectOneMenuChange() ?How can I get the value input input by the users inside Bean1.onSelectOneMenuChange() and set it to the corresponding fields of the Bean1 ?

           

          2.Another approach is that only reRender those textbox whose values are updated inside the Bean1.onSelectOneMenuChange() .However , there are many cases . For example , a value will change all the textbox value and a values may only change some textbox value.How can I reRender conditionally ?  What method is more prefer for maintainability?

           

           

          For point 2 , I find that the reRender preperties of the <a4j:support> can accept the EL expression , so I tried to use

           

          <a4j:support event="onchange"  action="#{Bean1.onSelectOneMenuChange}" reRender="#{Bean1.reRenderIDList}"  /> .

           

          Inside the  Bean1.onSelectOneMenuChange(), I set the Bean1.reRenderIDList to a set of ID that required to be reRender based on the business requirement.  The Bean1.getRenderIDList() runs when the page is refresh .However when I change the value of<h:selectOneMenu> in the UI , Bean1.getRenderIDList() will never run again .Thus , the textbox cannot be reRender?Any idea?

          • 2. Re: Using a4j:support 's onchange event with h:selectOneMenu
            wqe wqe Newbie

            wqe wqe wrote:

             

            <h:selectOneMenu id="selectOneMenu"  value="#{Bean1.val1}" >
                <f:selectItems value="#{Bean1.selectItems}"/>
                <a4j:support event="onchange" action="#{Bean1.onSelectOneMenuChange}" reRender="textbox1 , textbox2 , textbox3, textbox4"  />
            </h:selectOneMenu>

            <h:inputText id="textbox1" value="#{Bean1.textbox1}"> </h:inputText>
            <h:inputText id="textbox2" value="#{Bean1.textbox2}"> </h:inputText>
            <h:inputText id="textbox3" value="#{Bean1.textbox3}"> </h:inputText>
            <h:inputText id="textbox4" value="#{Bean1.textbox4}"> </h:inputText>

             

            Bean1.onSelectOneMenuChange() will change the value of Bean1.textbox1 , Bean1.textbox2,Bean1.textbox3 and Bean1.textbox4  depending on the value selected (Bean1.val1) .Sometimes , it will change all the textbox value and sometimes it will only changes some textbox value.


            When users change the value in the "selectOneMenu" drop down list control , the JSF framework will not call the update model values phase  but call the Bean1.onSelectOneMenuChange() directly.  After that , the all the textbox are reRender. Because the update model values phase  is not called , the values entered by the user is never set the the Bean1 and the original value is shown in the textbox after reRender . (The value enter by the user will disappear )

            So I want to ask:

             

            1. How can I manually call the update model values phase inside Bean1.onSelectOneMenuChange() ?How can I get the value input input by the users inside Bean1.onSelectOneMenuChange() and set it to the corresponding fields of the Bean1 ?

             

            2.Another approach is that only reRender those textbox whose values are updated inside the Bean1.onSelectOneMenuChange() .However , there are many cases . For example , a value will change all the textbox value and a values may only change some textbox value.How can I reRender conditionally ?  What method is more prefer for maintainability?

            Update for point 1 :

             

            Finally find out that there is a validation error such that the Update Model phase do not happen. There are some <h:inputText> that assign a java script function  to the onblur properties to do some validation . How can I bypass the  validation phase for those <a4j:support> onchange event ? I want  to do such validation after user fills in all data and at the moment of pressing the submit  button.Thanks!

            • 3. Re: Using a4j:support 's onchange event with h:selectOneMenu
              Rob Acraman Newbie

              wqe wqe wrote:

              How can I bypass the  validation phase for those <a4j:support> onchange event ?

              Use immediate="true"

              • 4. Re: Using a4j:support 's onchange event with h:selectOneMenu
                Ilya Shaikovsky Master

                if you want to update only value from current component and not from the other - use ajaxSingle=true

                • 5. Re: Using a4j:support 's onchange event with h:selectOneMenu
                  KEERTHIRAM MURUGESAN Newbie

                  I got a similar problem here:

                   

                  I have a selectOneListBox (1) component with a4j support. Whenever I change this component (1), it will call valueChangeEditEmailAddress function and update the inputText and other selectOneListBox (2) components. Now the problem is, whenever I select a value in the (1) component it throws the validation error messages since inputText and selectOneListBox are required. So I added the immediate="true" as you mentioned in your post, but it doesn't work. It doesn't update the inputText and other selectOneListBox components. I tried ajaxSingle="true" but no luck.

                   

                   

                  <f:view
                      afterPhase="#{somefunction here}">
                      <h:form id="edit_email_address_manager">
                        
                          <h:panelGrid columns="2">
                              <h:messages style="color:darkred"></h:messages>
                          </h:panelGrid>
                          
                          <a4j:region selfRendered="true" id="emailaddresslist_ajaxregion">
                              <a4j:status startText="Loading ..." startStyleClass="loadingStatus" />
                              <br />
                              <h:panelGrid columns="2"
                                  style="padding-right: 100px; padding-left: 100px">
                                  
                                  <h:panelGroup id="emailAddressList">
                                  
                                      <h:selectOneListbox id="emailAddressListid"
                                          value="#{selectedEmailAddress}"
                                          size="1" converter="#{EmailAddressDataConverter}"
                                          style="width: 200px;" required="true">
                                          <f:selectItem itemLabel="Select One" itemValue="NA" />
                                          <f:selectItems
                                              value="#{emailAddressList}"
                                              var="emailAddress" itemLabel="#{emailAddress.address}" />
                                          <f:validator validatorId="EmailAddressDataValidator" />
                                          <a4j:support event="onchange" immediate="true"  
                                              action="#{valueChangeEditEmailAddress}"
                                              reRender="emailaddresstypelistid,address" />
                                      </h:selectOneListbox>
                                      
                                  </h:panelGroup>
                                
                                  <h:inputText id="address"
                                      value="#{address}" style="width:200px"
                                      required="true" requiredMessage="Email address should not be empty">
                                      <f:validateRegex
                                          pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b" />
                                      <f:validateLength maximum="255" />
                                  </h:inputText>
                                 
                                  <h:selectOneMenu immediate="true" id="emailaddresstypelistid"
                                      onchange="sumbit()"
                                      value="#{selectedEmailAddressType}"
                                      converter="#{EmailAddressTypeDataConverter}" style="width:200px"
                                      required="true">
                                      <f:selectItem itemLabel="Select One" itemValue="NA" />
                                      <f:selectItems
                                          value="#{emailAddressTypeList}"
                                          var="emailAddresstype" itemLabel="#{emailAddresstype.desc}" />
                                      <f:validator validatorId="EmailAddressTypeDataValidator" />
                                  </h:selectOneMenu>
                                 
                                  <h:commandButton id="edit_email_address_button" value="Edit"
                                      action="#{editEmailAddressDetail}">
                                  </h:commandButton>
                              </h:panelGrid>
                          </a4j:region>
                  
                      </h:form>
                  </f:view>

                   

                   

                  - Keerti