AJAX basics with Process and Update

PrimeFaces provides a partial page rendering (PPR) and view-processing feature based on standard JSF 2 APIs to enable choosing what to process in the JSF lifecycle and what to render in the end with AJAX. PrimeFaces AJAX Framework is based on standard server-side APIs of JSF 2. On the client side, rather than using the client-side API implementations of JSF implementations, such as Mojarra and MyFaces, PrimeFaces scripts are based on the jQuery JavaScript library.

How to do it...

We can create a simple page with a command button to update a string property with the current time in milliseconds on the server side and an output text to show the value of that string property, as follows:

<p:commandButton update="display" action="#{basicPPRController.updateValue}" value="Update" />
<h:outputText id="display" value="#{basicPPRController.value}"/>

If we would like to update multiple components with the same trigger mechanism, we can provide the IDs of the components to the update attribute by providing them a space, comma, or both, as follows:

<p:commandButton update="display1,display2" /> 
<p:commandButton update="display1 display2" /> 
<p:commandButton update="display1,display2 display3" />

In addition, there are reserved keywords that are used for a partial update. We can also make use of these keywords along with the IDs of the components, as described in the following table:

Keyword	Description
@this	The component that triggers the PPR is updated
@parent	The parent of the PPR trigger is updated
@form	The encapsulating form of the PPR trigger is updated
@none	PPR does not change the DOM with AJAX response
@all	The whole document is updated as in non-AJAX requests

We can also update a component that resides in a different naming container from the component that triggers the update. In order to achieve this, we need to specify the absolute component identifier of the component that needs to be updated. An example for this could be the following:

<h:form id="form1">
  <p:commandButton update=":form2:display" 
action="#{basicPPRController.updateValue}" value="Update" />
</h:form>

<h:form id="form2">
  <h:outputText id="display" value="#{basicPPRController.value}"/>
</h:form>

public String updateValue() {
  value = String.valueOf(System.currentTimeMillis());
  return null;
}

PrimeFaces also provides partial processing, which executes the JSF lifecycle phases—Apply Request Values, Process Validations, Update Model, and Invoke Application—for determined components with the process attribute. This provides the ability to do group validation on the JSF pages easily. Mostly group-validation needs arise in situations where different values need to be validated in the same form, depending on an action that gets executed. By grouping components for validation, errors that would arise from other components when the page has been submitted can be overcome easily. Components like commandButton, commandLink, autoComplete, fileUpload, and many others provide this attribute to process partially instead of the whole view.

Partial processing could become very handy in cases when a drop-down list needs to be populated upon a selection on another drop down and when there is an input field on the page with the required attribute set to true. This approach also makes immediate subforms and regions obsolete. It will also prevent submission of the whole page, thus this will result in lightweight requests. Without partially processing the view for the drop downs, a selection on one of the drop downs will result in a validation error on the required field. An example for this is shown in the following code snippet:

<h:outputText value="Country: " />
<h:selectOneMenu id="countries" value="#{partialProcessingController.country}">
<f:selectItems value="#{partialProcessingController.countries}" />
  <p:ajax listener="#{partialProcessingController.handleCountryChange}"
    event="change" update="cities" process="@this"/>
</h:selectOneMenu>
<h:outputText value="City: " />
<h:selectOneMenu id="cities" value="#{partialProcessingController.city}">
  <f:selectItems value="#{partialProcessingController.cities}" />
</h:selectOneMenu>

<h:outputText value="Email: " />
<h:inputText value="#{partialProcessingController.email}" required="true" />

With this partial processing mechanism, when a user changes the country, the cities of that country will be populated in the drop down regardless of whether any input exists for the email field.

How it works...

As seen in partial processing example for updating a component in a different naming container, <p:commandButton> is updating the <h:outputText> component that has the ID display, and absolute client ID :form2:display, which is the search expression for the findComponent method. An absolute client ID starts with the separator character of the naming container, which is : by default.

The <h:form>, <h:dataTable>, composite JSF components along with <p:tabView>, <p:accordionPanel>, <p:dataTable>, <p:dataGrid>, <p:dataList>, <p:carousel>, <p:galleria>, <p:ring>, <p:sheet>, and <p:subTable> are the components that implement the NamingContainer interface. The findComponent method, which is described at http://docs.oracle.com/javaee/6/api/javax/faces/component/UIComponent.html, is used by both JSF core implementation and PrimeFaces.

There's more...

JSF uses : (a colon) as the separator for the NamingContainer interface. The client IDs that will be rendered in the source page will be like :id1:id2:id3. If needed, the configuration of the separator can be changed for the web application to something other than the colon with a context parameter in the web.xml file of the web application, as follows:

<context-param>
  <param-name>javax.faces.SEPARATOR_CHAR</param-name>
  <param-value>_</param-value>
</context-param>

It's also possible to escape the : character, if needed, in the CSS files with the \ character, as \:. The problem that might occur with the colon is that it's a reserved keyword for the CSS and JavaScript frameworks, like jQuery, so it might need to be escaped.

PrimeFaces Cookbook Showcase application

This recipe is available in the PrimeFaces Cookbook Showcase application on GitHub at https://github.com/ova2/primefaces-cookbook. You can find the details there for running the project. For the demos of the showcase, refer to the following:

• Basic Partial Page Rendering is available at http://localhost:8080/primefaces-cookbook/views/chapter1/basicPPR.jsf

• Updating Component in Different Naming Container is available at http://localhost:8080/primefaces-cookbook/views/chapter1/componentInDifferentNamingContainer.jsf

• A Partial Processing example at http://localhost:8080/primefaces-cookbook/views/chapter1/partialProcessing.jsf