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

[drupalspring]

<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?

[drupalspring]

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?

[drupalspring]

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!

[ufonaut]

wqe wqe wrote:

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

Use immediate="true"

[ilya_shaikovsky]

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

[keerthi166]

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

[ilya_shaikovsky]

good sample on dependent components