Ajax update and submission using h:commandButton

ajax, jsf, jsf-2, primefaces

Solution

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

Problem

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

Original source