Understanding PrimeFaces process update and JSF f ajax execute render attributes

Question

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    lt p commandButton process   parent                   update   form                   action    bean submit                     value  Submit    gt

User · Answer

Please note that PrimeFaces supports the standard JSF 2.0+ keywords:

@this Current component.
@all Whole view.
@form Closest ancestor form of current component.
@none No component.

and the standard 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.

But, it also comes with some 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/10_0_0/#/core/searchexpression

User · Answer

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

User · Answer

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

User · Answer

lt p commandXxx process gt   lt p ajax process gt   lt f ajax execute gt  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  lt p commandButton gt   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   lt p inputText id  quot foo quot  value  quot   bean foo  quot    gt   lt p commandButton process  quot foo quot  action  quot   bean action  quot    gt   It would only process the   bean foo  and not the   bean action   You d need to include the command component itself as well   lt p inputText id  quot foo quot  value  quot   bean foo  quot    gt   lt p commandButton process  quot  this foo quot  action  quot   bean action  quot    gt   Or  as you apparently found out  using  parent if they happen to be the only components having a common parent   lt p panel gt  lt  -- Type doesn t matter  as long as it s a common parent  -- gt       lt p inputText id  quot foo quot  value  quot   bean foo  quot    gt       lt p commandButton process  quot  parent quot  action  quot   bean action  quot    gt   lt  p panel gt   Or  if they both happen to be the only components of the parent UIForm component  then you can also use  form   lt h form gt       lt p inputText id  quot foo quot  value  quot   bean foo  quot    gt       lt p commandButton process  quot  form quot  action  quot   bean action  quot    gt   lt  h form gt   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  quot  all quot  behaves exactly the same as process  quot  form quot   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  quot everything quot  contained within the HTML representation of the  lt h form gt  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  lt p commandXxx     partialSubmit  quot true quot  gt  or  lt p ajax     partialSubmit  quot true quot  gt   You can also configure this  globally  by editing web xml and add  lt context-param gt       lt param-name gt primefaces SUBMIT lt  param-name gt       lt param-value gt partial lt  param-value gt   lt  context-param gt   Alternatively  you can also use  lt o form gt  of OmniFaces 3 0  which defaults to this behavior  The standard JSF equivalent to the PrimeFaces specific process is execute from  lt f ajax execute gt   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  lt p commandXxx process gt  defaults to  form while  lt p ajax process gt  and  lt f ajax execute gt  defaults to  this  Finally  it s also useful to know that process supports the so-called  quot PrimeFaces Selectors quot   see also How do PrimeFaces Selectors as in update  quot    myClass  quot  work    lt p commandXxx update gt   lt p ajax update gt   lt f ajax render gt  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  quot refreshed quot  in the client side upon  partial  form submit  The example below updates the entire parent form via  form   lt h form gt       lt p inputText id  quot foo quot  value  quot   bean foo  quot  required  quot true quot    gt       lt p message id  quot foo m quot  for  quot foo quot    gt       lt p inputText id  quot bar quot  value  quot   bean bar  quot  required  quot true quot    gt       lt p message id  quot bar m quot  for  quot bar quot    gt       lt p commandButton action  quot   bean action  quot  update  quot  form quot    gt   lt  h form gt    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   lt h form gt       lt p inputText id  quot foo quot  value  quot   bean foo  quot  required  quot true quot    gt       lt p message id  quot foo m quot  for  quot foo quot    gt       lt p inputText id  quot bar quot  value  quot   bean bar  quot  required  quot true quot    gt       lt p message id  quot bar m quot  for  quot bar quot    gt       lt p commandButton action  quot   bean action  quot  update  quot foo m bar m quot    gt   lt  h form gt   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   lt h form gt       lt p inputText id  quot foo quot  value  quot   bean foo  quot  required  quot true quot    gt       lt p message id  quot foo m quot  for  quot foo quot    gt       lt p inputText id  quot bar quot  value  quot   bean bar  quot  required  quot true quot    gt       lt p message id  quot bar m quot  for  quot bar quot    gt       lt p commandButton action  quot   bean action  quot  update  quot    ui-message  quot    gt   lt  h form gt    note that you should keep the IDs on message components  otherwise        won t work  Again  see How do PrimeFaces Selectors as in update  quot    myClass  quot  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   lt p commandButton action  quot   bean action  quot  update  quot  this quot       oncomplete  quot doSomething    bean value    quot    gt   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   lt a gt  or  lt h link gt   or a redirect-after-POST by  faces-redirect true or ExternalContext redirect    In effects  process  quot  form quot  update  quot  all quot  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  lt f ajax render gt   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   quot nothing quot     See also   How to find out client ID of component for ajax update render  Cannot find component with expression  quot foo quot  referenced from  quot bar quot  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  lt h form gt  in JSF page  Single form  Multiple forms  Nested forms

[jsf] Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes

Examples related to jsf

Examples related to primefaces

Examples related to process

Examples related to updates