P:commandButton vs. h:commandButton

commandbuttonjsfprimefaces

When I am using a PrimeFaces p:commandButton

<p:commandButton action=#{bean.action} />

I don't see the the validation messages for inputs (both the default h: ones or the PrimeFaces p: ones.) For example with

<f:validateRequired />

When I am using default command button like

<h:commandButton action=#{bean.action} />

I do see the validations. What can be the cause of this difference?

I am using Prime Faces 3.5 with Mojarra 2.1.18

<h:form id="reliefhourheadcopy-form">

        <h:panelGrid columns="1">
            <h:outputText value="Kopiere Entlastungsstunden von" />
            <h:outputText value="Semester: #{reliefHourHeadManagedBean.reliefHourHead.semester}" />
            <h:outputText value="Jahr: #{reliefHourHeadManagedBean.reliefHourHead.year}" />
            <h:outputText value="nach" />               
        </h:panelGrid>

        <h:panelGrid columns="3">

            <h:outputText value="Semester:" />
            <p:selectOneMenu id="semester" value="#{reliefHourHeadManagedBean.semester}">
                <f:selectItems value="#{reliefHourHeadManagedBean.semesterTypes}" />
            </p:selectOneMenu>
            <h:message for="semester" />

            <h:outputText for="yearSpinner" value="Jahr:" />
            <p:spinner id="yearSpinner" value="#{reliefHourHeadManagedBean.year}" maxlength="4" min="2000" max="2030" size="4">
                <f:validateRequired />
                <f:validateLongRange minimum="2000" maximum="2030" />
            </p:spinner>
            <h:message for="yearSpinner" />

        </h:panelGrid>

        <h:panelGrid columns="1" style="margin-top:25px">
            <p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" >
                <f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
            </p:commandButton>
        </h:panelGrid>

    </h:form>

Best Answer

Like @Partlov wrote in the comments below the question,

Main difference is that p:commandButton is AJAX by default, and h:commandButton is non-AJAX by default.

So

<p:commandButton ... />

is more like

<h:commandButton ...>
    <f:ajax/>
</h:commandButton>

but

<p:commandButton ...>
    <p:ajax/>
</p:commandButton>

is wrong and leads to undefined behaviour

or the other way around

<h:commandButton ... />

is like

<p:commandButton ajax="false" ... />

The p:commandButton will submit the form by default. However by default it does not update anything in the form after the ajax call is finished so the messages are not displayed (which in development mode would have shown in the log files that messages were enqueued but not displayed) . The non-ajax h:commandButton does a full page refresh that does show the messages. In order to get the form (which contains the message component) updated when using the p:commandButton you need to add the update attribute:

<p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" update="@form">
    <f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
</p:commandButton>

Adding an (superfluous) f:ajax or p:ajax inside a p:commandXXX can result in strange undefined behaviour

See also

Related Topic