JSF Partial Screen Update processes full component tree - ajax

I need some JSF / PrimeFaces (3.5) advice.
We have a dynamic form, the form can be configured by a form builder, and the backing bean is a glorified HashMap with some additional getters and setters like (getValueAsDate/setValueAsDate).
One of our field types allows for entering a number and when leaving the field additional information is requested and part of the form is updated. This appeared all to work nicely.
<h:panelGroup id="clientInfo" layout="block" rendered="#{field.type == 'CLIENTINFO'}">
<h:outputLabel for="inputClientId">#{field.label}</h:outputLabel>
<p:inputText id="inputClientId" maxlength="9" value="#{handler.property(field.id).value}">
<p:ajax listener="#{handler.fetchClientDetails(field.id)}" partialSubmit="true" process="#this" update="#parent,:mainform:msgs"
</p:inputText>
<!-- Additional output text elements to display the name, address etc. -->
</h:panelGroup>
Recently we added a field which allowed for entering a java.util.Date using the PrimeFaces date picker component. After adding this field type the partial update stopped working.
<h:panelGroup id="date" layout="block" rendered="#{field.type == 'DATE'}">
<h:outputLabel for="inputDate">#{field.label}</h:outputLabel>
<p:calendar id="inputDate" value="#{handler.property(field.id).valueAsDate}" pattern="dd-MM-yyyy" maxlength="10">
<f:convertDateTime pattern="dd-MM-yyyy" />
</p:calendar>
</h:panelGroup>
When inspecting the partial result from the server we got something like the following (where 12345 is the clientId entered in the field above).
<partial-response>
<error>
<error-name>class java.text.ParseException</error-name>
<error-message><![CDATA[Unparseable date: "12345"]]></error-message>
</error>
</partial-response>
The question is basically why is it even calling the getValueAsDate method for a field that isn't a Date or when there is even no date field type on the screen? It is probably something I'm missing (or misunderstanding) about the JSF Lifecycle or how partial updates work in JSF / PrimeFaces.
Update #1:
Just noticed in another debugging session that this isn't only happening for a partial update but already when initially rendering the screen. It appears as if all EL expressions are evaluated all the time, this also results in additional properties in my backing object (when a property is requested and it doesn't exists it is created with the value null).
Update #2:
The code to render the configured fields uses a ui:repeat en conditional ui:fragments (tried h:panelGroups as well) to render the specific input element for the configured field.
<ui:repeat value=#{handler.formFields} var="field">
<ui:fragment rendered="field.type == 'DATE'>
<!-- Specific fragment for date field -->
</ui:fragment>
<ui:fragment rendered="field.type == 'TEXT'>
</ui:fragment>
<ui:fragment rendered="field.type == 'REGEXP'>
</ui:fragment>
<ui:fragment rendered="field.type == 'CLIENT'>
</ui:fragment>
</ui:repeat>
Tried both h:panelGroup and ui:fragments combinations of the 2.

This is recognizable as a Mojarra specific <ui:repeat> bug which was reported as issue 3215, fixed in 2.2.7 and backported in 2.1.29 as per issue 3221. Simply put, the issue boils down to that the <ui:repeat> didn't respect the state of its EditableValueHolder children when saving own state, hereby basically behaving as if rendered attribute of those children was never respected during state saving. One of other consequences is fleshed out in the following related Q&A: PropertyNotFoundException on conditionally rendered subclasses in ui:repeat.
Given that you're on Mojarra 2.1.x, your best bet is to upgrade to at least 2.1.29. If your environment allows it (Servlet 3.0 and such), upgrading to latest 2.2.x should also be possible.
Alternatives would be replacing Mojarra by MyFaces, or replacing <ui:repeat><ui:fragment> by <c:forEach><c:if>.

Related

Required value from bean doesn't change back to "false" [duplicate]

What exactly are process and update in PrimeFaces p:commandXxx components and execute and render in f:ajax tag?
Which works at the time of validation? What does update attribute do rather than updating value to component from back end? Do process attribute bind value to model? What exactly do #this, #parent, #all and #form in both attributes?
The example below is working fine, but I am a little confused in basic concepts.
<p:commandButton process="#parent"
update="#form"
action="#{bean.submit}"
value="Submit" />
<p:commandXxx process> <p:ajax process> <f:ajax execute>
The process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields). The process attribute tells JSF, using a space-separated list of client IDs, which components exactly must be processed through the entire JSF lifecycle upon (partial) form submit.
JSF will then apply the request values (finding HTTP request parameter based on component's own client ID and then either setting it as submitted value in case of EditableValueHolder components or queueing a new ActionEvent in case of ActionSource components), perform conversion, validation and updating the model values (EditableValueHolder components only) and finally invoke the queued ActionEvent (ActionSource components only). JSF will skip processing of all other components which are not covered by process attribute. Also, components whose rendered attribute evaluates to false during apply request values phase will also be skipped as part of safeguard against tampered requests.
Note that it's in case of ActionSource components (such as <p:commandButton>) very important that you also include the component itself in the process attribute, particularly if you intend to invoke the action associated with the component. So the below example which intends to process only certain input component(s) when a certain command component is invoked ain't gonna work:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />
It would only process the #{bean.foo} and not the #{bean.action}. You'd need to include the command component itself as well:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#this foo" action="#{bean.action}" />
Or, as you apparently found out, using #parent if they happen to be the only components having a common parent:
<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#parent" action="#{bean.action}" />
</p:panel>
Or, if they both happen to be the only components of the parent UIForm component, then you can also use #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#form" action="#{bean.action}" />
</h:form>
This is sometimes undesirable if the form contains more input components which you'd like to skip in processing, more than often in cases when you'd like to update another input component(s) or some UI section based on the current input component in an ajax listener method. You namely don't want that validation errors on other input components are preventing the ajax listener method from being executed.
Then there's the #all. This has no special effect in process attribute, but only in update attribute. A process="#all" behaves exactly the same as process="#form". HTML doesn't support submitting multiple forms at once anyway.
There's by the way also a #none which may be useful in case you absolutely don't need to process anything, but only want to update some specific parts via update, particularly those sections whose content doesn't depend on submitted values or action listeners.
Noted should be that the process attribute has no influence on the HTTP request payload (the amount of request parameters). Meaning, the default HTML behavior of sending "everything" contained within the HTML representation of the <h:form> will be not be affected. In case you have a large form, and want to reduce the HTTP request payload to only these absolutely necessary in processing, i.e. only these covered by process attribute, then you can set the partialSubmit attribute in PrimeFaces Ajax components as in <p:commandXxx ... partialSubmit="true"> or <p:ajax ... partialSubmit="true">. You can also configure this 'globally' by editing web.xml and add
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Alternatively, you can also use <o:form> of OmniFaces 3.0+ which defaults to this behavior.
The standard JSF equivalent to the PrimeFaces specific process is execute from <f:ajax execute>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Also, it may be useful to know that <p:commandXxx process> defaults to #form while <p:ajax process> and <f:ajax execute> defaults to #this. Finally, it's also useful to know that process supports the so-called "PrimeFaces Selectors", see also How do PrimeFaces Selectors as in update="#(.myClass)" work?
<p:commandXxx update> <p:ajax update> <f:ajax render>
The update attribute is client side and can affect the HTML representation of all UIComponents. The update attribute tells JavaScript (the one responsible for handling the ajax request/response), using a space-separated list of client IDs, which parts in the HTML DOM tree need to be updated as response to the form submit.
JSF will then prepare the right ajax response for that, containing only the requested parts to update. JSF will skip all other components which are not covered by update attribute in the ajax response, hereby keeping the response payload small. Also, components whose rendered attribute evaluates to false during render response phase will be skipped. Note that even though it would return true, JavaScript cannot update it in the HTML DOM tree if it was initially false. You'd need to wrap it or update its parent instead. See also Ajax update/render does not work on a component which has rendered attribute.
Usually, you'd like to update only the components which really need to be "refreshed" in the client side upon (partial) form submit. The example below updates the entire parent form via #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#form" />
</h:form>
(note that process attribute is omitted as that defaults to #form already)
Whilst that may work fine, the update of input and command components is in this particular example unnecessary. Unless you change the model values foo and bar inside action method (which would in turn be unintuitive in UX perspective), there's no point of updating them. The message components are the only which really need to be updated:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>
However, that gets tedious when you have many of them. That's one of the reasons why PrimeFaces Selectors exist. Those message components have in the generated HTML output a common style class of ui-message, so the following should also do:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#(.ui-message)" />
</h:form>
(note that you should keep the IDs on message components, otherwise #(...) won't work! Again, see How do PrimeFaces Selectors as in update="#(.myClass)" work? for detail)
The #parent updates only the parent component, which thus covers the current component and all siblings and their children. This is more useful if you have separated the form in sane groups with each its own responsibility. The #this updates, obviously, only the current component. Normally, this is only necessary when you need to change one of the component's own HTML attributes in the action method. E.g.
<p:commandButton action="#{bean.action}" update="#this"
oncomplete="doSomething('#{bean.value}')" />
Imagine that the oncomplete needs to work with the value which is changed in action, then this construct wouldn't have worked if the component isn't updated, for the simple reason that oncomplete is part of generated HTML output (and thus all EL expressions in there are evaluated during render response).
The #all updates the entire document, which should be used with care. Normally, you'd like to use a true GET request for this instead by either a plain link (<a> or <h:link>) or a redirect-after-POST by ?faces-redirect=true or ExternalContext#redirect(). In effects, process="#form" update="#all" has exactly the same effect as a non-ajax (non-partial) submit. In my entire JSF career, the only sensible use case I encountered for #all is to display an error page in its entirety in case an exception occurs during an ajax request. See also What is the correct way to deal with JSF 2.0 exceptions for AJAXified components?
The standard JSF equivalent to the PrimeFaces specific update is render from <f:ajax render>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Both update and render defaults to #none (which is, "nothing").
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Execution order of events when pressing PrimeFaces p:commandButton
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
How to show details of current row from p:dataTable in a p:dialog and update after save
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
If you have a hard time remembering the default values (I know I have...) here's a short extract from BalusC's answer:
Component
Submit
Refresh
f:ajax
execute="#this"
render="#none"
p:ajax
process="#this"
update="#none"
p:commandXXX
process="#form"
update="#none"
By process (in the JSF specification it's called execute) you tell JSF to limit the processing to component that are specified every thing else is just ignored.
update indicates which element will be updated when the server respond back to you request.
#all : Every component is processed/rendered.
#this: The requesting component with the execute attribute is processed/rendered.
#form : The form that contains the requesting component is processed/rendered.
#parent: The parent that contains the requesting component is processed/rendered.
With Primefaces you can even use JQuery selectors, check out this blog: http://blog.primefaces.org/?p=1867
JSF 2.0+ keywords
#this Current component.
#all Whole view.
#form Closest ancestor form of current component.
#none No component.
JSF 2.3+ keywords
#child(n) nth child.
#composite Closest composite component ancestor.
#id(id) Used to search components by their id ignoring the component tree structure and naming containers.
#namingcontainer Closest ancestor naming container of current component.
#parent Parent of the current component.
#previous Previous sibling.
#next Next sibling.
#root UIViewRoot instance of the view, can be used to start searching from the root instead the current component.
PrimeFaces specific keywords
#row(n) nth row.
#widgetVar(name) Component with given widgetVar.
And you can even use something called "PrimeFaces Selectors" which allows you to use jQuery Selector API. For example to process all inputs in a element with the CSS class myClass:
process="#(.myClass :input)"
See:
https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression
PrimeFaces 10+ Observer / Event
This allows you to update components based on a custom event name, set by the #obs(event) keyword. For example:
<p:commandButton update="#obs(myEvent)"/>
<h:panelGroup>
<p:autoUpdate on="myEvent"/>
</h:panelGroup>
See:
https://www.primefaces.org/showcase/ui/ajax/observer.xhtml
These are PrimeFaces features to provide partial view processing and partial rendering. You can control what to execute in lifecycle and what to render with ajax.
When using backing bean properties in expression language
process attribute calls SETTER methods
update attribute calls GETTER methods
primefaces forum

How to partially process pure JSF2 form with ajax? [duplicate]

What exactly are process and update in PrimeFaces p:commandXxx components and execute and render in f:ajax tag?
Which works at the time of validation? What does update attribute do rather than updating value to component from back end? Do process attribute bind value to model? What exactly do #this, #parent, #all and #form in both attributes?
The example below is working fine, but I am a little confused in basic concepts.
<p:commandButton process="#parent"
update="#form"
action="#{bean.submit}"
value="Submit" />
<p:commandXxx process> <p:ajax process> <f:ajax execute>
The process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields). The process attribute tells JSF, using a space-separated list of client IDs, which components exactly must be processed through the entire JSF lifecycle upon (partial) form submit.
JSF will then apply the request values (finding HTTP request parameter based on component's own client ID and then either setting it as submitted value in case of EditableValueHolder components or queueing a new ActionEvent in case of ActionSource components), perform conversion, validation and updating the model values (EditableValueHolder components only) and finally invoke the queued ActionEvent (ActionSource components only). JSF will skip processing of all other components which are not covered by process attribute. Also, components whose rendered attribute evaluates to false during apply request values phase will also be skipped as part of safeguard against tampered requests.
Note that it's in case of ActionSource components (such as <p:commandButton>) very important that you also include the component itself in the process attribute, particularly if you intend to invoke the action associated with the component. So the below example which intends to process only certain input component(s) when a certain command component is invoked ain't gonna work:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />
It would only process the #{bean.foo} and not the #{bean.action}. You'd need to include the command component itself as well:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#this foo" action="#{bean.action}" />
Or, as you apparently found out, using #parent if they happen to be the only components having a common parent:
<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#parent" action="#{bean.action}" />
</p:panel>
Or, if they both happen to be the only components of the parent UIForm component, then you can also use #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#form" action="#{bean.action}" />
</h:form>
This is sometimes undesirable if the form contains more input components which you'd like to skip in processing, more than often in cases when you'd like to update another input component(s) or some UI section based on the current input component in an ajax listener method. You namely don't want that validation errors on other input components are preventing the ajax listener method from being executed.
Then there's the #all. This has no special effect in process attribute, but only in update attribute. A process="#all" behaves exactly the same as process="#form". HTML doesn't support submitting multiple forms at once anyway.
There's by the way also a #none which may be useful in case you absolutely don't need to process anything, but only want to update some specific parts via update, particularly those sections whose content doesn't depend on submitted values or action listeners.
Noted should be that the process attribute has no influence on the HTTP request payload (the amount of request parameters). Meaning, the default HTML behavior of sending "everything" contained within the HTML representation of the <h:form> will be not be affected. In case you have a large form, and want to reduce the HTTP request payload to only these absolutely necessary in processing, i.e. only these covered by process attribute, then you can set the partialSubmit attribute in PrimeFaces Ajax components as in <p:commandXxx ... partialSubmit="true"> or <p:ajax ... partialSubmit="true">. You can also configure this 'globally' by editing web.xml and add
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Alternatively, you can also use <o:form> of OmniFaces 3.0+ which defaults to this behavior.
The standard JSF equivalent to the PrimeFaces specific process is execute from <f:ajax execute>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Also, it may be useful to know that <p:commandXxx process> defaults to #form while <p:ajax process> and <f:ajax execute> defaults to #this. Finally, it's also useful to know that process supports the so-called "PrimeFaces Selectors", see also How do PrimeFaces Selectors as in update="#(.myClass)" work?
<p:commandXxx update> <p:ajax update> <f:ajax render>
The update attribute is client side and can affect the HTML representation of all UIComponents. The update attribute tells JavaScript (the one responsible for handling the ajax request/response), using a space-separated list of client IDs, which parts in the HTML DOM tree need to be updated as response to the form submit.
JSF will then prepare the right ajax response for that, containing only the requested parts to update. JSF will skip all other components which are not covered by update attribute in the ajax response, hereby keeping the response payload small. Also, components whose rendered attribute evaluates to false during render response phase will be skipped. Note that even though it would return true, JavaScript cannot update it in the HTML DOM tree if it was initially false. You'd need to wrap it or update its parent instead. See also Ajax update/render does not work on a component which has rendered attribute.
Usually, you'd like to update only the components which really need to be "refreshed" in the client side upon (partial) form submit. The example below updates the entire parent form via #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#form" />
</h:form>
(note that process attribute is omitted as that defaults to #form already)
Whilst that may work fine, the update of input and command components is in this particular example unnecessary. Unless you change the model values foo and bar inside action method (which would in turn be unintuitive in UX perspective), there's no point of updating them. The message components are the only which really need to be updated:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>
However, that gets tedious when you have many of them. That's one of the reasons why PrimeFaces Selectors exist. Those message components have in the generated HTML output a common style class of ui-message, so the following should also do:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#(.ui-message)" />
</h:form>
(note that you should keep the IDs on message components, otherwise #(...) won't work! Again, see How do PrimeFaces Selectors as in update="#(.myClass)" work? for detail)
The #parent updates only the parent component, which thus covers the current component and all siblings and their children. This is more useful if you have separated the form in sane groups with each its own responsibility. The #this updates, obviously, only the current component. Normally, this is only necessary when you need to change one of the component's own HTML attributes in the action method. E.g.
<p:commandButton action="#{bean.action}" update="#this"
oncomplete="doSomething('#{bean.value}')" />
Imagine that the oncomplete needs to work with the value which is changed in action, then this construct wouldn't have worked if the component isn't updated, for the simple reason that oncomplete is part of generated HTML output (and thus all EL expressions in there are evaluated during render response).
The #all updates the entire document, which should be used with care. Normally, you'd like to use a true GET request for this instead by either a plain link (<a> or <h:link>) or a redirect-after-POST by ?faces-redirect=true or ExternalContext#redirect(). In effects, process="#form" update="#all" has exactly the same effect as a non-ajax (non-partial) submit. In my entire JSF career, the only sensible use case I encountered for #all is to display an error page in its entirety in case an exception occurs during an ajax request. See also What is the correct way to deal with JSF 2.0 exceptions for AJAXified components?
The standard JSF equivalent to the PrimeFaces specific update is render from <f:ajax render>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Both update and render defaults to #none (which is, "nothing").
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Execution order of events when pressing PrimeFaces p:commandButton
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
How to show details of current row from p:dataTable in a p:dialog and update after save
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
If you have a hard time remembering the default values (I know I have...) here's a short extract from BalusC's answer:
Component
Submit
Refresh
f:ajax
execute="#this"
render="#none"
p:ajax
process="#this"
update="#none"
p:commandXXX
process="#form"
update="#none"
By process (in the JSF specification it's called execute) you tell JSF to limit the processing to component that are specified every thing else is just ignored.
update indicates which element will be updated when the server respond back to you request.
#all : Every component is processed/rendered.
#this: The requesting component with the execute attribute is processed/rendered.
#form : The form that contains the requesting component is processed/rendered.
#parent: The parent that contains the requesting component is processed/rendered.
With Primefaces you can even use JQuery selectors, check out this blog: http://blog.primefaces.org/?p=1867
JSF 2.0+ keywords
#this Current component.
#all Whole view.
#form Closest ancestor form of current component.
#none No component.
JSF 2.3+ keywords
#child(n) nth child.
#composite Closest composite component ancestor.
#id(id) Used to search components by their id ignoring the component tree structure and naming containers.
#namingcontainer Closest ancestor naming container of current component.
#parent Parent of the current component.
#previous Previous sibling.
#next Next sibling.
#root UIViewRoot instance of the view, can be used to start searching from the root instead the current component.
PrimeFaces specific keywords
#row(n) nth row.
#widgetVar(name) Component with given widgetVar.
And you can even use something called "PrimeFaces Selectors" which allows you to use jQuery Selector API. For example to process all inputs in a element with the CSS class myClass:
process="#(.myClass :input)"
See:
https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression
PrimeFaces 10+ Observer / Event
This allows you to update components based on a custom event name, set by the #obs(event) keyword. For example:
<p:commandButton update="#obs(myEvent)"/>
<h:panelGroup>
<p:autoUpdate on="myEvent"/>
</h:panelGroup>
See:
https://www.primefaces.org/showcase/ui/ajax/observer.xhtml
These are PrimeFaces features to provide partial view processing and partial rendering. You can control what to execute in lifecycle and what to render with ajax.
When using backing bean properties in expression language
process attribute calls SETTER methods
update attribute calls GETTER methods
primefaces forum

Is this the sequence of how f:ajax executes and affects the response render cycle [duplicate]

What exactly are process and update in PrimeFaces p:commandXxx components and execute and render in f:ajax tag?
Which works at the time of validation? What does update attribute do rather than updating value to component from back end? Do process attribute bind value to model? What exactly do #this, #parent, #all and #form in both attributes?
The example below is working fine, but I am a little confused in basic concepts.
<p:commandButton process="#parent"
update="#form"
action="#{bean.submit}"
value="Submit" />
<p:commandXxx process> <p:ajax process> <f:ajax execute>
The process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields). The process attribute tells JSF, using a space-separated list of client IDs, which components exactly must be processed through the entire JSF lifecycle upon (partial) form submit.
JSF will then apply the request values (finding HTTP request parameter based on component's own client ID and then either setting it as submitted value in case of EditableValueHolder components or queueing a new ActionEvent in case of ActionSource components), perform conversion, validation and updating the model values (EditableValueHolder components only) and finally invoke the queued ActionEvent (ActionSource components only). JSF will skip processing of all other components which are not covered by process attribute. Also, components whose rendered attribute evaluates to false during apply request values phase will also be skipped as part of safeguard against tampered requests.
Note that it's in case of ActionSource components (such as <p:commandButton>) very important that you also include the component itself in the process attribute, particularly if you intend to invoke the action associated with the component. So the below example which intends to process only certain input component(s) when a certain command component is invoked ain't gonna work:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />
It would only process the #{bean.foo} and not the #{bean.action}. You'd need to include the command component itself as well:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#this foo" action="#{bean.action}" />
Or, as you apparently found out, using #parent if they happen to be the only components having a common parent:
<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#parent" action="#{bean.action}" />
</p:panel>
Or, if they both happen to be the only components of the parent UIForm component, then you can also use #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#form" action="#{bean.action}" />
</h:form>
This is sometimes undesirable if the form contains more input components which you'd like to skip in processing, more than often in cases when you'd like to update another input component(s) or some UI section based on the current input component in an ajax listener method. You namely don't want that validation errors on other input components are preventing the ajax listener method from being executed.
Then there's the #all. This has no special effect in process attribute, but only in update attribute. A process="#all" behaves exactly the same as process="#form". HTML doesn't support submitting multiple forms at once anyway.
There's by the way also a #none which may be useful in case you absolutely don't need to process anything, but only want to update some specific parts via update, particularly those sections whose content doesn't depend on submitted values or action listeners.
Noted should be that the process attribute has no influence on the HTTP request payload (the amount of request parameters). Meaning, the default HTML behavior of sending "everything" contained within the HTML representation of the <h:form> will be not be affected. In case you have a large form, and want to reduce the HTTP request payload to only these absolutely necessary in processing, i.e. only these covered by process attribute, then you can set the partialSubmit attribute in PrimeFaces Ajax components as in <p:commandXxx ... partialSubmit="true"> or <p:ajax ... partialSubmit="true">. You can also configure this 'globally' by editing web.xml and add
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Alternatively, you can also use <o:form> of OmniFaces 3.0+ which defaults to this behavior.
The standard JSF equivalent to the PrimeFaces specific process is execute from <f:ajax execute>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Also, it may be useful to know that <p:commandXxx process> defaults to #form while <p:ajax process> and <f:ajax execute> defaults to #this. Finally, it's also useful to know that process supports the so-called "PrimeFaces Selectors", see also How do PrimeFaces Selectors as in update="#(.myClass)" work?
<p:commandXxx update> <p:ajax update> <f:ajax render>
The update attribute is client side and can affect the HTML representation of all UIComponents. The update attribute tells JavaScript (the one responsible for handling the ajax request/response), using a space-separated list of client IDs, which parts in the HTML DOM tree need to be updated as response to the form submit.
JSF will then prepare the right ajax response for that, containing only the requested parts to update. JSF will skip all other components which are not covered by update attribute in the ajax response, hereby keeping the response payload small. Also, components whose rendered attribute evaluates to false during render response phase will be skipped. Note that even though it would return true, JavaScript cannot update it in the HTML DOM tree if it was initially false. You'd need to wrap it or update its parent instead. See also Ajax update/render does not work on a component which has rendered attribute.
Usually, you'd like to update only the components which really need to be "refreshed" in the client side upon (partial) form submit. The example below updates the entire parent form via #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#form" />
</h:form>
(note that process attribute is omitted as that defaults to #form already)
Whilst that may work fine, the update of input and command components is in this particular example unnecessary. Unless you change the model values foo and bar inside action method (which would in turn be unintuitive in UX perspective), there's no point of updating them. The message components are the only which really need to be updated:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>
However, that gets tedious when you have many of them. That's one of the reasons why PrimeFaces Selectors exist. Those message components have in the generated HTML output a common style class of ui-message, so the following should also do:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#(.ui-message)" />
</h:form>
(note that you should keep the IDs on message components, otherwise #(...) won't work! Again, see How do PrimeFaces Selectors as in update="#(.myClass)" work? for detail)
The #parent updates only the parent component, which thus covers the current component and all siblings and their children. This is more useful if you have separated the form in sane groups with each its own responsibility. The #this updates, obviously, only the current component. Normally, this is only necessary when you need to change one of the component's own HTML attributes in the action method. E.g.
<p:commandButton action="#{bean.action}" update="#this"
oncomplete="doSomething('#{bean.value}')" />
Imagine that the oncomplete needs to work with the value which is changed in action, then this construct wouldn't have worked if the component isn't updated, for the simple reason that oncomplete is part of generated HTML output (and thus all EL expressions in there are evaluated during render response).
The #all updates the entire document, which should be used with care. Normally, you'd like to use a true GET request for this instead by either a plain link (<a> or <h:link>) or a redirect-after-POST by ?faces-redirect=true or ExternalContext#redirect(). In effects, process="#form" update="#all" has exactly the same effect as a non-ajax (non-partial) submit. In my entire JSF career, the only sensible use case I encountered for #all is to display an error page in its entirety in case an exception occurs during an ajax request. See also What is the correct way to deal with JSF 2.0 exceptions for AJAXified components?
The standard JSF equivalent to the PrimeFaces specific update is render from <f:ajax render>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Both update and render defaults to #none (which is, "nothing").
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Execution order of events when pressing PrimeFaces p:commandButton
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
How to show details of current row from p:dataTable in a p:dialog and update after save
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
If you have a hard time remembering the default values (I know I have...) here's a short extract from BalusC's answer:
Component
Submit
Refresh
f:ajax
execute="#this"
render="#none"
p:ajax
process="#this"
update="#none"
p:commandXXX
process="#form"
update="#none"
By process (in the JSF specification it's called execute) you tell JSF to limit the processing to component that are specified every thing else is just ignored.
update indicates which element will be updated when the server respond back to you request.
#all : Every component is processed/rendered.
#this: The requesting component with the execute attribute is processed/rendered.
#form : The form that contains the requesting component is processed/rendered.
#parent: The parent that contains the requesting component is processed/rendered.
With Primefaces you can even use JQuery selectors, check out this blog: http://blog.primefaces.org/?p=1867
JSF 2.0+ keywords
#this Current component.
#all Whole view.
#form Closest ancestor form of current component.
#none No component.
JSF 2.3+ keywords
#child(n) nth child.
#composite Closest composite component ancestor.
#id(id) Used to search components by their id ignoring the component tree structure and naming containers.
#namingcontainer Closest ancestor naming container of current component.
#parent Parent of the current component.
#previous Previous sibling.
#next Next sibling.
#root UIViewRoot instance of the view, can be used to start searching from the root instead the current component.
PrimeFaces specific keywords
#row(n) nth row.
#widgetVar(name) Component with given widgetVar.
And you can even use something called "PrimeFaces Selectors" which allows you to use jQuery Selector API. For example to process all inputs in a element with the CSS class myClass:
process="#(.myClass :input)"
See:
https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression
PrimeFaces 10+ Observer / Event
This allows you to update components based on a custom event name, set by the #obs(event) keyword. For example:
<p:commandButton update="#obs(myEvent)"/>
<h:panelGroup>
<p:autoUpdate on="myEvent"/>
</h:panelGroup>
See:
https://www.primefaces.org/showcase/ui/ajax/observer.xhtml
These are PrimeFaces features to provide partial view processing and partial rendering. You can control what to execute in lifecycle and what to render with ajax.
When using backing bean properties in expression language
process attribute calls SETTER methods
update attribute calls GETTER methods
primefaces forum

How to get Ajax to re-render a field after a valueChangeListener is called? [duplicate]

What exactly are process and update in PrimeFaces p:commandXxx components and execute and render in f:ajax tag?
Which works at the time of validation? What does update attribute do rather than updating value to component from back end? Do process attribute bind value to model? What exactly do #this, #parent, #all and #form in both attributes?
The example below is working fine, but I am a little confused in basic concepts.
<p:commandButton process="#parent"
update="#form"
action="#{bean.submit}"
value="Submit" />
<p:commandXxx process> <p:ajax process> <f:ajax execute>
The process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields). The process attribute tells JSF, using a space-separated list of client IDs, which components exactly must be processed through the entire JSF lifecycle upon (partial) form submit.
JSF will then apply the request values (finding HTTP request parameter based on component's own client ID and then either setting it as submitted value in case of EditableValueHolder components or queueing a new ActionEvent in case of ActionSource components), perform conversion, validation and updating the model values (EditableValueHolder components only) and finally invoke the queued ActionEvent (ActionSource components only). JSF will skip processing of all other components which are not covered by process attribute. Also, components whose rendered attribute evaluates to false during apply request values phase will also be skipped as part of safeguard against tampered requests.
Note that it's in case of ActionSource components (such as <p:commandButton>) very important that you also include the component itself in the process attribute, particularly if you intend to invoke the action associated with the component. So the below example which intends to process only certain input component(s) when a certain command component is invoked ain't gonna work:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />
It would only process the #{bean.foo} and not the #{bean.action}. You'd need to include the command component itself as well:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#this foo" action="#{bean.action}" />
Or, as you apparently found out, using #parent if they happen to be the only components having a common parent:
<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#parent" action="#{bean.action}" />
</p:panel>
Or, if they both happen to be the only components of the parent UIForm component, then you can also use #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#form" action="#{bean.action}" />
</h:form>
This is sometimes undesirable if the form contains more input components which you'd like to skip in processing, more than often in cases when you'd like to update another input component(s) or some UI section based on the current input component in an ajax listener method. You namely don't want that validation errors on other input components are preventing the ajax listener method from being executed.
Then there's the #all. This has no special effect in process attribute, but only in update attribute. A process="#all" behaves exactly the same as process="#form". HTML doesn't support submitting multiple forms at once anyway.
There's by the way also a #none which may be useful in case you absolutely don't need to process anything, but only want to update some specific parts via update, particularly those sections whose content doesn't depend on submitted values or action listeners.
Noted should be that the process attribute has no influence on the HTTP request payload (the amount of request parameters). Meaning, the default HTML behavior of sending "everything" contained within the HTML representation of the <h:form> will be not be affected. In case you have a large form, and want to reduce the HTTP request payload to only these absolutely necessary in processing, i.e. only these covered by process attribute, then you can set the partialSubmit attribute in PrimeFaces Ajax components as in <p:commandXxx ... partialSubmit="true"> or <p:ajax ... partialSubmit="true">. You can also configure this 'globally' by editing web.xml and add
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Alternatively, you can also use <o:form> of OmniFaces 3.0+ which defaults to this behavior.
The standard JSF equivalent to the PrimeFaces specific process is execute from <f:ajax execute>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Also, it may be useful to know that <p:commandXxx process> defaults to #form while <p:ajax process> and <f:ajax execute> defaults to #this. Finally, it's also useful to know that process supports the so-called "PrimeFaces Selectors", see also How do PrimeFaces Selectors as in update="#(.myClass)" work?
<p:commandXxx update> <p:ajax update> <f:ajax render>
The update attribute is client side and can affect the HTML representation of all UIComponents. The update attribute tells JavaScript (the one responsible for handling the ajax request/response), using a space-separated list of client IDs, which parts in the HTML DOM tree need to be updated as response to the form submit.
JSF will then prepare the right ajax response for that, containing only the requested parts to update. JSF will skip all other components which are not covered by update attribute in the ajax response, hereby keeping the response payload small. Also, components whose rendered attribute evaluates to false during render response phase will be skipped. Note that even though it would return true, JavaScript cannot update it in the HTML DOM tree if it was initially false. You'd need to wrap it or update its parent instead. See also Ajax update/render does not work on a component which has rendered attribute.
Usually, you'd like to update only the components which really need to be "refreshed" in the client side upon (partial) form submit. The example below updates the entire parent form via #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#form" />
</h:form>
(note that process attribute is omitted as that defaults to #form already)
Whilst that may work fine, the update of input and command components is in this particular example unnecessary. Unless you change the model values foo and bar inside action method (which would in turn be unintuitive in UX perspective), there's no point of updating them. The message components are the only which really need to be updated:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>
However, that gets tedious when you have many of them. That's one of the reasons why PrimeFaces Selectors exist. Those message components have in the generated HTML output a common style class of ui-message, so the following should also do:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#(.ui-message)" />
</h:form>
(note that you should keep the IDs on message components, otherwise #(...) won't work! Again, see How do PrimeFaces Selectors as in update="#(.myClass)" work? for detail)
The #parent updates only the parent component, which thus covers the current component and all siblings and their children. This is more useful if you have separated the form in sane groups with each its own responsibility. The #this updates, obviously, only the current component. Normally, this is only necessary when you need to change one of the component's own HTML attributes in the action method. E.g.
<p:commandButton action="#{bean.action}" update="#this"
oncomplete="doSomething('#{bean.value}')" />
Imagine that the oncomplete needs to work with the value which is changed in action, then this construct wouldn't have worked if the component isn't updated, for the simple reason that oncomplete is part of generated HTML output (and thus all EL expressions in there are evaluated during render response).
The #all updates the entire document, which should be used with care. Normally, you'd like to use a true GET request for this instead by either a plain link (<a> or <h:link>) or a redirect-after-POST by ?faces-redirect=true or ExternalContext#redirect(). In effects, process="#form" update="#all" has exactly the same effect as a non-ajax (non-partial) submit. In my entire JSF career, the only sensible use case I encountered for #all is to display an error page in its entirety in case an exception occurs during an ajax request. See also What is the correct way to deal with JSF 2.0 exceptions for AJAXified components?
The standard JSF equivalent to the PrimeFaces specific update is render from <f:ajax render>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Both update and render defaults to #none (which is, "nothing").
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Execution order of events when pressing PrimeFaces p:commandButton
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
How to show details of current row from p:dataTable in a p:dialog and update after save
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
If you have a hard time remembering the default values (I know I have...) here's a short extract from BalusC's answer:
Component
Submit
Refresh
f:ajax
execute="#this"
render="#none"
p:ajax
process="#this"
update="#none"
p:commandXXX
process="#form"
update="#none"
By process (in the JSF specification it's called execute) you tell JSF to limit the processing to component that are specified every thing else is just ignored.
update indicates which element will be updated when the server respond back to you request.
#all : Every component is processed/rendered.
#this: The requesting component with the execute attribute is processed/rendered.
#form : The form that contains the requesting component is processed/rendered.
#parent: The parent that contains the requesting component is processed/rendered.
With Primefaces you can even use JQuery selectors, check out this blog: http://blog.primefaces.org/?p=1867
JSF 2.0+ keywords
#this Current component.
#all Whole view.
#form Closest ancestor form of current component.
#none No component.
JSF 2.3+ keywords
#child(n) nth child.
#composite Closest composite component ancestor.
#id(id) Used to search components by their id ignoring the component tree structure and naming containers.
#namingcontainer Closest ancestor naming container of current component.
#parent Parent of the current component.
#previous Previous sibling.
#next Next sibling.
#root UIViewRoot instance of the view, can be used to start searching from the root instead the current component.
PrimeFaces specific keywords
#row(n) nth row.
#widgetVar(name) Component with given widgetVar.
And you can even use something called "PrimeFaces Selectors" which allows you to use jQuery Selector API. For example to process all inputs in a element with the CSS class myClass:
process="#(.myClass :input)"
See:
https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression
PrimeFaces 10+ Observer / Event
This allows you to update components based on a custom event name, set by the #obs(event) keyword. For example:
<p:commandButton update="#obs(myEvent)"/>
<h:panelGroup>
<p:autoUpdate on="myEvent"/>
</h:panelGroup>
See:
https://www.primefaces.org/showcase/ui/ajax/observer.xhtml
These are PrimeFaces features to provide partial view processing and partial rendering. You can control what to execute in lifecycle and what to render with ajax.
When using backing bean properties in expression language
process attribute calls SETTER methods
update attribute calls GETTER methods
primefaces forum

When to use execute #form and #this in Jsf Ajax requests on Command buttons [duplicate]

What exactly are process and update in PrimeFaces p:commandXxx components and execute and render in f:ajax tag?
Which works at the time of validation? What does update attribute do rather than updating value to component from back end? Do process attribute bind value to model? What exactly do #this, #parent, #all and #form in both attributes?
The example below is working fine, but I am a little confused in basic concepts.
<p:commandButton process="#parent"
update="#form"
action="#{bean.submit}"
value="Submit" />
<p:commandXxx process> <p:ajax process> <f:ajax execute>
The process attribute is server side and can only affect UIComponents implementing EditableValueHolder (input fields) or ActionSource (command fields). The process attribute tells JSF, using a space-separated list of client IDs, which components exactly must be processed through the entire JSF lifecycle upon (partial) form submit.
JSF will then apply the request values (finding HTTP request parameter based on component's own client ID and then either setting it as submitted value in case of EditableValueHolder components or queueing a new ActionEvent in case of ActionSource components), perform conversion, validation and updating the model values (EditableValueHolder components only) and finally invoke the queued ActionEvent (ActionSource components only). JSF will skip processing of all other components which are not covered by process attribute. Also, components whose rendered attribute evaluates to false during apply request values phase will also be skipped as part of safeguard against tampered requests.
Note that it's in case of ActionSource components (such as <p:commandButton>) very important that you also include the component itself in the process attribute, particularly if you intend to invoke the action associated with the component. So the below example which intends to process only certain input component(s) when a certain command component is invoked ain't gonna work:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />
It would only process the #{bean.foo} and not the #{bean.action}. You'd need to include the command component itself as well:
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#this foo" action="#{bean.action}" />
Or, as you apparently found out, using #parent if they happen to be the only components having a common parent:
<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#parent" action="#{bean.action}" />
</p:panel>
Or, if they both happen to be the only components of the parent UIForm component, then you can also use #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="#form" action="#{bean.action}" />
</h:form>
This is sometimes undesirable if the form contains more input components which you'd like to skip in processing, more than often in cases when you'd like to update another input component(s) or some UI section based on the current input component in an ajax listener method. You namely don't want that validation errors on other input components are preventing the ajax listener method from being executed.
Then there's the #all. This has no special effect in process attribute, but only in update attribute. A process="#all" behaves exactly the same as process="#form". HTML doesn't support submitting multiple forms at once anyway.
There's by the way also a #none which may be useful in case you absolutely don't need to process anything, but only want to update some specific parts via update, particularly those sections whose content doesn't depend on submitted values or action listeners.
Noted should be that the process attribute has no influence on the HTTP request payload (the amount of request parameters). Meaning, the default HTML behavior of sending "everything" contained within the HTML representation of the <h:form> will be not be affected. In case you have a large form, and want to reduce the HTTP request payload to only these absolutely necessary in processing, i.e. only these covered by process attribute, then you can set the partialSubmit attribute in PrimeFaces Ajax components as in <p:commandXxx ... partialSubmit="true"> or <p:ajax ... partialSubmit="true">. You can also configure this 'globally' by editing web.xml and add
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Alternatively, you can also use <o:form> of OmniFaces 3.0+ which defaults to this behavior.
The standard JSF equivalent to the PrimeFaces specific process is execute from <f:ajax execute>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Also, it may be useful to know that <p:commandXxx process> defaults to #form while <p:ajax process> and <f:ajax execute> defaults to #this. Finally, it's also useful to know that process supports the so-called "PrimeFaces Selectors", see also How do PrimeFaces Selectors as in update="#(.myClass)" work?
<p:commandXxx update> <p:ajax update> <f:ajax render>
The update attribute is client side and can affect the HTML representation of all UIComponents. The update attribute tells JavaScript (the one responsible for handling the ajax request/response), using a space-separated list of client IDs, which parts in the HTML DOM tree need to be updated as response to the form submit.
JSF will then prepare the right ajax response for that, containing only the requested parts to update. JSF will skip all other components which are not covered by update attribute in the ajax response, hereby keeping the response payload small. Also, components whose rendered attribute evaluates to false during render response phase will be skipped. Note that even though it would return true, JavaScript cannot update it in the HTML DOM tree if it was initially false. You'd need to wrap it or update its parent instead. See also Ajax update/render does not work on a component which has rendered attribute.
Usually, you'd like to update only the components which really need to be "refreshed" in the client side upon (partial) form submit. The example below updates the entire parent form via #form:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#form" />
</h:form>
(note that process attribute is omitted as that defaults to #form already)
Whilst that may work fine, the update of input and command components is in this particular example unnecessary. Unless you change the model values foo and bar inside action method (which would in turn be unintuitive in UX perspective), there's no point of updating them. The message components are the only which really need to be updated:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>
However, that gets tedious when you have many of them. That's one of the reasons why PrimeFaces Selectors exist. Those message components have in the generated HTML output a common style class of ui-message, so the following should also do:
<h:form>
<p:inputText id="foo" value="#{bean.foo}" required="true" />
<p:message id="foo_m" for="foo" />
<p:inputText id="bar" value="#{bean.bar}" required="true" />
<p:message id="bar_m" for="bar" />
<p:commandButton action="#{bean.action}" update="#(.ui-message)" />
</h:form>
(note that you should keep the IDs on message components, otherwise #(...) won't work! Again, see How do PrimeFaces Selectors as in update="#(.myClass)" work? for detail)
The #parent updates only the parent component, which thus covers the current component and all siblings and their children. This is more useful if you have separated the form in sane groups with each its own responsibility. The #this updates, obviously, only the current component. Normally, this is only necessary when you need to change one of the component's own HTML attributes in the action method. E.g.
<p:commandButton action="#{bean.action}" update="#this"
oncomplete="doSomething('#{bean.value}')" />
Imagine that the oncomplete needs to work with the value which is changed in action, then this construct wouldn't have worked if the component isn't updated, for the simple reason that oncomplete is part of generated HTML output (and thus all EL expressions in there are evaluated during render response).
The #all updates the entire document, which should be used with care. Normally, you'd like to use a true GET request for this instead by either a plain link (<a> or <h:link>) or a redirect-after-POST by ?faces-redirect=true or ExternalContext#redirect(). In effects, process="#form" update="#all" has exactly the same effect as a non-ajax (non-partial) submit. In my entire JSF career, the only sensible use case I encountered for #all is to display an error page in its entirety in case an exception occurs during an ajax request. See also What is the correct way to deal with JSF 2.0 exceptions for AJAXified components?
The standard JSF equivalent to the PrimeFaces specific update is render from <f:ajax render>. It behaves exactly the same except that it doesn't support a comma-separated string while the PrimeFaces one does (although I personally recommend to just stick to space-separated convention), nor the #parent keyword. Both update and render defaults to #none (which is, "nothing").
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Execution order of events when pressing PrimeFaces p:commandButton
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
How to show details of current row from p:dataTable in a p:dialog and update after save
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
If you have a hard time remembering the default values (I know I have...) here's a short extract from BalusC's answer:
Component
Submit
Refresh
f:ajax
execute="#this"
render="#none"
p:ajax
process="#this"
update="#none"
p:commandXXX
process="#form"
update="#none"
By process (in the JSF specification it's called execute) you tell JSF to limit the processing to component that are specified every thing else is just ignored.
update indicates which element will be updated when the server respond back to you request.
#all : Every component is processed/rendered.
#this: The requesting component with the execute attribute is processed/rendered.
#form : The form that contains the requesting component is processed/rendered.
#parent: The parent that contains the requesting component is processed/rendered.
With Primefaces you can even use JQuery selectors, check out this blog: http://blog.primefaces.org/?p=1867
JSF 2.0+ keywords
#this Current component.
#all Whole view.
#form Closest ancestor form of current component.
#none No component.
JSF 2.3+ keywords
#child(n) nth child.
#composite Closest composite component ancestor.
#id(id) Used to search components by their id ignoring the component tree structure and naming containers.
#namingcontainer Closest ancestor naming container of current component.
#parent Parent of the current component.
#previous Previous sibling.
#next Next sibling.
#root UIViewRoot instance of the view, can be used to start searching from the root instead the current component.
PrimeFaces specific keywords
#row(n) nth row.
#widgetVar(name) Component with given widgetVar.
And you can even use something called "PrimeFaces Selectors" which allows you to use jQuery Selector API. For example to process all inputs in a element with the CSS class myClass:
process="#(.myClass :input)"
See:
https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression
PrimeFaces 10+ Observer / Event
This allows you to update components based on a custom event name, set by the #obs(event) keyword. For example:
<p:commandButton update="#obs(myEvent)"/>
<h:panelGroup>
<p:autoUpdate on="myEvent"/>
</h:panelGroup>
See:
https://www.primefaces.org/showcase/ui/ajax/observer.xhtml
These are PrimeFaces features to provide partial view processing and partial rendering. You can control what to execute in lifecycle and what to render with ajax.
When using backing bean properties in expression language
process attribute calls SETTER methods
update attribute calls GETTER methods
primefaces forum

Resources