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>.

Solution 1

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.

See also:

• Communication in JSF 2.0 - Ajax (asynchronous) POST form

Solution 2

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>