Ajax update and submission using h:commandButton

Question

How to update a div and do partial submission using <h:commandButton>, I have previously used <p:commandButton> to do partial submission by setting the ajax attribute to true and the update attribute to :statusBlock, where the id of the <h:panelGroup> is statusBlock. I am having some designing issues with <p:commandButton> so I cannot use it so I have to use <h:commandButton>.

score 29 · Accepted Answer · edited Jun 20 '20 at 09:12

29

This is to be done by nesting a <f:ajax> in it.

In effects,

<p:commandButton ... process="@form" update=":statusBlock" />

does exactly the same as

<h:commandButton ...>
    <f:ajax execute="@form" render=":statusBlock" />
</h:commandButton>

Note that the subtle difference with the PrimeFaces equivalent is that PrimeFaces defaults to @form in the process/execute, while the <f:ajax> one defaults to @this, so you might need to explicitly specify execute="@form" over all place where you didn't specify the process attribute in the PrimeFaces component.

What does the execute and process attribute do in h:commandButton? – Wizard Sultan Mar 21 '13 at 13:26
5

The `` does exactly the same as ``. The `` does exactly the same as ``. The those attributes just specifies which components needs to be executed/processed during the form submit (which defaults in case of PrimeFaces to the whole form and in case of standard JSF to the current component). – BalusC Mar 21 '13 at 13:28

score 5 · Answer 2 · answered Mar 21 '13 at 13:20

You can just use the standard components alongside f:ajax e.g.

<h:form id="myForm">       
  <h:commandButton value="Push Me">
     <f:ajax execute="myForm" render="statusBlock" />
  </h:commandButton>
  <h:panelGroup id="statusBlock">
  </h:panelGroup> 
</h:form>

Ajax update and submission using h:commandButton

2 Answers2

See also:

Linked

Related