Powerful Ajax with Update and Process attributes in PrimeFaces


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 :


  <h:inputText label="description" required="true" id="description" requiredMessage="Description is required" />

  <p:panel header="Location Selection" id="locationSelector">
   <h:panelGrid columns="2">
      <h:outputText value="Select Country" />
      <h:selectOneMenu id="country" value="#{locationController.country}">
          <f:selectItem itemLabel="Select a Country" itemValue="" />
          <f:selectItems value="#{locationController.allCountries}" />
          <p:ajax update="city" process="country" event="change" actionListener="#{locationController.chooseCountry}" />

      <h:outputText value="Select City" />
      <h:selectOneMenu id="city" value="#{locationController.city}" >
         <f:selectItem itemLabel="Select a City" itemValue="" />
         <f:selectItems value="#{locationController.cities}" />
   <br />

   <p:commandLink actionListener="#{locationController.selectLocation}" update="selectedCities" process="locationSelector" >
      <h:outputText value="select city" />

The tricky part here is the <p:ajax update="city" 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 :

<p:panel id="selectedCities" header="Selected Cities">
   <p:dataTable value="#{locationController.selectedCities}" var="city">
          <f:facet name="header">
              City Name
         <h:outputText value="#{city.name} ( #{city.country.name} )"/>

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 😉