Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

p:commandButton vs. h:commandButton

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>
like image 238
Caron Avatar asked Mar 07 '13 09:03

Caron


1 Answers

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

  • Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
like image 190
bjedrzejewski Avatar answered Oct 03 '22 06:10

bjedrzejewski