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 #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
Related
I have the following block of code, when i update the "pickList" from the p:remoteCommand it gets updated.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
oncomplete="rc()" />
<h:outputText value=" " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<p:remoteCommand name="rc" update="panel" />
But when I use "update" attribute in the "refereshButton", the pickList does not get updated.
Below is the same code but without p:remoteCommand and with update attribute in refereshButton.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
update="pickList" />
<h:outputText value=" " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
What this reason behind this behavior?
The reason you are getting different results is because you are doing different updates. You update panel from the remote command and pickList from the button.
Use update="panel" on your button to get the same result. This will also save you an Ajax request (and some server load).
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 #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
In my example, the bean paisMB opens a dialog with a datatable for the user search a object. In the bean portoMB I have the controller of a crud that uses the object searched in the paisMB.
The code below works, but it does not update the inputText, the update of the <p:ajax> execute before the onsuccess. How can I update the inputText?
<p:inputText id="pais" label="País" value="#{paisMB.paisSelecionado.nome}" required="true" readonly="true" />
<p:commandButton icon="fa fa-search" actionListener="#{paisMB.openPaisDialog}" >
<p:ajax event="dialogReturn" update="panel"
listener="#{paisMB.onPaisChosenFromDialog}"
onerror="#{portoMB.portoSelecionado.setPais(null)}"
onsuccess="#{portoMB.portoSelecionado.setPais(paisMB.paisSelecionado)}" />
</p:commandButton>
BalusC showed me an answer that fixes my problem.
The following is the modified code:
<p:commandButton icon="fa fa-search" actionListener="#{paisMB.openPaisDialog}" >
<p:ajax event="dialogReturn" listener="#{paisMB.onPaisChosenFromDialog}"
onerror="setPaisNull()" onsuccess="setPaisObj()" />
<p:remoteCommand name="setPaisObj" update="panel" action="#{portoMB.portoSelecionado.setPais(paisMB.paisSelecionado)}" />
<p:remoteCommand name="setPaisNull" update="panel" action="#{portoMB.portoSelecionado.setPais(null)}" />
</p:commandButton>
Hello I am trying to implement some primefaces commandbuttons in a p:datatable. My need is almost identical to this post:
f:setPropertyActionListener not invoked
Basically I need to have a column of buttons in a , click on one button will pass the object of the current row to the bean, and a dialog will pop out, showing some information of the chosen object.
The following is the relevant code:
<f:view>
<body>
<h:form id="theForm">
<p:dataTable id="testFailures" value="#{testDetails.report.failures}" var="failure"
styleClass="baseTable">
<p:column id="requestColumn">
<f:facet name="header">
<h:outputText value="Request" id="requestHeaderText" />
</f:facet>
<p:commandButton value="Detail" update="requestDialog"
oncomplete="PF('dlg1').show();" type="button">
<f:setPropertyActionListener
target="#{testDetails.selectedFailure}" value="#{failure}" />
</p:commandButton>
<h:message for="requestDialog" />
<p:dialog id="requestDialog" header="Request Dialog"
widgetVar="dlg1" dynamic="true">
<h:outputText value="#{selectedFailure.request}" />
</p:dialog>
</p:column>
</p:dataTable>
</h:form>
<h:message for="theForm" />
<h:message for="responseDialog" />
<p:dialog id="responseDialog" header="Request Dialog"
widgetVar="dlg2" dynamic="true">
<h:form>
<h:outputText value="#{selectedFailure.request}" />
</h:form>
</p:dialog>
</body>
</f:view>
I tried to put the dialog in different positions (see my "dlg1" and "dlg2"). But neither works. No dialog showing. does not show anything either. And I don't see any error message in the browser's console window. (I think there is a exclamation warning).
I have tried debug mode, and set method for the property "selectedFailure" is not called.
Try to remove type="button" from your commandButton and it should work. Also dialogs should not be placed inside dataTables so the position of "dlg2" is more correct.
when i click on the command button. validate method is getting called but the error message is not getting displayed..
here is my code..
<h:form id="form">
<h:body>
<p:panel style="width:500px">
<h:outputLabel for="year" value="Select Year: *" style="font-weight:bold" />
<p:selectOneMenu id="year" value="#{leaveBean.year}">
<f:selectItem itemLabel="Select One" itemValue="null" />
<f:selectItems value="#{leaveBean.yearDTO}" var="currentUser" itemValue="#{currentUser.name}" itemLabel="#{currentUser.name}" />
<f:validator validatorId="LeaveCardValidator" />
</p:selectOneMenu>
</p:panel>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails" id="button"/>
<h:message for="year" style="color:red"/>
You seem to expect that JSF auto-updates the <h:message> on every ajax request. This is untrue. Perhaps you're confusing with PrimeFaces <p:messages> or <p:growl> which have each an autoUpdate attribute which enables you to tell them to auto-update themselves on every ajax request.
You really need to make sure that the <h:message> is covered by the ajax update. Just give it an ID
<h:message id="yearMessage" ... />
and include it in the client ID collection of the ajax update
<p:commandButton ... update="updateList updateDetails yearMessage" />
An alternative would be to replace <h:message> by <p:messages autoUpdate="true">.
Not sure where are the updateList and updateDetails are located but in the example give above you should use update="#form" instead or in addtion like this:
update="updateList updateDetails #form"
so that the form will be rendered again...
just use one of these :
update the whole form in order to update the content of
<h:message />
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="#form" id="button"/>
or give the <h:message /> an id and id this id to the <p:commandButton/>
<h:message id="msg" for="year" style="color:red"/>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails,msg" id="button"/>