Partial view submit

One other cool feature of the enhanced AJAX provided by PrimeFaces is the partialSubmit attribute that can be applied to action components and <p:ajax>, where only partially processed components are added to the AJAX requests with their ID's. By default, the JSF and PrimeFaces implementation serializes the whole form to send it via AJAX requests, and eventually, with large views, this will increase the size of the network data traffic that will be posted to the server. To overcome this problem, partial submit can be used to reduce the size of the post data when actions take place on views that have quite a lot of input fields. With this approach, only the ID's of the partially processed fields will be sent to the server.

How to do it…

Partial submit is disabled by default; it can be enabled globally with a context parameter in web.xml, as follows:

<context-param>
  <param-name>primefaces.SUBMIT</param-name>
  <param-value>partial</param-value>
</context-param>

Or, it can be declared with the partialSubmit attribute explicitly on the command action, as follows:

<h:outputLabel for="name" value="Name:" 
  style="font-weight:bold" />
<p:inputText id="name" />
<p:commandButton value="Partial Submit (False)" 
  partialSubmit="false" process="name" />
<p:commandButton value="Partial Submit (True)" 
  partialSubmit="true" process="name" />
<p:inputText /> <p:inputText /> <p:inputText /><br\>
<p:inputText /> <p:inputText /> <p:inputText /><br\>
<p:inputText /> <p:inputText /> <p:inputText /><br\>

How it works…

The visual output of the given code snippet will be as follows. So, here we have two buttons, one with the partialSubmit attribute set to false and another one set to true:

When the button with the Partial Submit (False) label is clicked, the AJAX request that will be sent to the server will contain all the ID's of the input text fields that exist on the page. An example output for the AJAX request is extracted from the <p:log> component (a visual console to display internal logs of PrimeFaces) and given here:

Data:javax.faces.partial.ajax=true&javax.faces.source=j_idt19&jav
ax.faces.partial.execute=name&j_idt19=j_idt19&mainForm=mainForm&bo
okTree_selection=0_6&name=mert&j_idt21=&j_idt22=&j_idt23=&j_id
t24=&j_idt25=&j_idt26=&j_idt27=&j_idt28=&j_idt29=&javax.fac
es.ViewState=-6151865609302284540%3A502720797990996178

The ID's that are highlighted belong to the input text fields that exist in the page. If we click on the button with the Partial Submit (True) label, we should get an AJAX request with no chained ID list in the data list:

Data:javax.faces.partial.ajax=true&javax.faces.source=j_idt20&jav
ax.faces.partial.execute=name&j_idt20=j_idt20&name=&javax.faces.Vi
ewState=-6151865609302284540%3A502720797990996178

Note

The partial submit feature does not exist within the core JSF features; it's a feature provided by PrimeFaces.

There's more…

With version 5.2, PrimeFaces introduced partial submit filtering, which allows customization on the AJAX data sent to the server. This comes in handy when you have multiple input fields within a data table, for instance, and try to prevent sending the ID list of those input fields to the server while doing paging, sorting, or row selection. The filter can be defined as a selector and its default value is :input. The example AJAX component in the following code will filter on all the input fields and will not send any data to the server:

<p:ajax event="page" partialSubmit="true"
  partialSubmitFilter=":not(:input)" />

The PrimeFaces Cookbook Showcase application

This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.

The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter1/partialSubmit.jsf.