Powerful Ajax with Update and Process attributes in PrimeFaces

Posted: October 28, 2011 in Java Posts


PrimeFaces has a very easy and powerful ajax infrastructure using update and process attributes in ajaxified components. Let’s have this following condition:

There is a required inputText field, and also below that you have a dependent 2 h:selectOneMenu components that needs to be ajaxified. Let’s say those two selectOneMenu’s are for country – city, and last requirement is you have to add the selected city to a datatable. A little complicated screen maybe, but which requirement is not? :) .Here is the final output we want :

Let’s do the coding. We need a required inputText for the description and a county city selector as follows :

01 <h:form>
03    Description:<br/>
04   <h:inputText label="description" required="true" id="description" requiredMessage="Description is required" />
06   <p:panel header="Location Selection" id="locationSelector">
07    <h:panelGrid columns="2">
08       <h:outputText value="Select Country" />
09       <h:selectOneMenu id="country" value="#{locationController.country}">
10           <f:selectItem itemLabel="Select a Country" itemValue="" />
11           <f:selectItems value="#{locationController.allCountries}" />
12           <p:ajax update="city" process="country" event="change" actionListener="#{locationController.chooseCountry}" />
13       </h:selectOneMenu>
15       <h:outputText value="Select City" />
16       <h:selectOneMenu id="city" value="#{locationController.city}" >
17          <f:selectItem itemLabel="Select a City" itemValue="" />
18          <f:selectItems value="#{locationController.cities}" />
19       </h:selectOneMenu>
20    </h:panelGrid>
21    <br />
23    <p:commandLink actionListener="#{locationController.selectLocation}" update="selectedCities" process="locationSelector" >
24       <h:outputText value="select city" />
25    </p:commandLink>
26   </p:panel>
27 </h:form>

The tricky part here is the <p:ajax update="locationSelector" process="country" event="change" actionListener="#{locationController.chooseCountry}" /> part. This one does an ajax request when the h:selectOneMenu is changed ( event=”change” ), the selectOneMenu with the id country is processed ( process=”country” ), as only the country part is important while filling the city selector selectOneMenu ( note that we do not have a required message error due to description field, as we never process it even if they are in the same form), and finally refresh city selectOneMenu ( update=”city” ) to refresh the city selector. This way we have minimum load on the server, and we do not fight with validation errors.

Let’s move on to the p:datatable part, think we have a very basic table below for selected Cities :

01 <p:panel id="selectedCities" header="Selected Cities">
02    <p:dataTable value="#{locationController.selectedCities}" var="city">
03       <p:column>
04           <f:facet name="header">
05               City Name
06           </f:facet>
07          <h:outputText value="#{city.name} ( #{city.country.name} )"/>
08      </p:column>
09   </p:dataTable>
10 </p:panel>

Same way as p:ajax works, the p:commandLink will work as follow, update the table ( update=”selectedCities” ), but process the location selector div ( process=”locationSelector” ) as we need to use city and country in our action listener. Easy huh?

I think, this is one of the most powerful side of the PrimeFaces. You can do ajax request without having any validations errors.

I am leaving you the delete command link in the datatable as an exercise ;)

  1. … [Trackback]…

    […] There you will find more Infos: shanisk.wordpress.com/2011/10/28/powerful-ajax-with-update-and-process-attributes-in-primefaces/ […]…

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s