CK's Developer Blog

Let us consider a scenario where we can use the attribute ajaxSingle in a JSF  and Seam based application.

We have a country drop down and a dependent state drop down in a given UI. Both country and state are mandatory fields. As you can see from the code below, I am using Seam validation by mentioning s:validateAll.

<h:form>
<s:validateAll>
 <h:panelGrid columns="3">
 <h:outputLabel for="country">Select Country:</h:outputLabel>

 <h:selectOneMenu  id="country"  value="#{searchaction.country}" required="true">
 <s:selectItems value="#{countries}" var="cntry" label="#{cntry.name}"
 noSelectionLabel="select..." />
 <s:convertEntity />
 <a:support  action="#{searchaction.handleCountrySelection}" reRender="state" event="onchange">
 <a:ajaxListener type="org.ajax4jsf.ajax.ForceRender"/>
 </a:support>

 </h:selectOneMenu>
 <rich:message for="country"/>

 <h:outputLabel for="state">Select State:</h:outputLabel>

 <h:selectManyListbox  size="#{searchaction.states.size+1}" id="state"  value="#{searchaction.state}" required="true">
 <s:selectItems value="#{searchaction.states}" var="state" label="#{state.name}"
 />
 <s:convertEntity />

 </h:selectManyListbox>
<rich:message for="state"/>
</h:panelGrid>
</s:validateAll>
</h:form>

As I have assigned true to required attribute of state selectManyListbox, when user changes the selection in country drop down, we get a validation error message saying that state field is required. This is because during the AJAX submission the entire form details is submitted and hence validationhappens on all fields.

So as a solution, we assign the attribute ajaxSingle to the AJAX submission of  country drop down as below. This validates only country drop down and enables the population of the state drop down.

<a:support  action="#{searchaction.handleCountrySelection}" reRender="state" event="onchange" ajaxSingle="true">
 <a:ajaxListener type="org.ajax4jsf.ajax.ForceRender"/>
 </a:support>