p:commandbutton action doesn't work inside p:dialog
Question
I have ap:dialog and there is a panel inside it. The problem is "Save" button's action method is not working. It doesn't even calls the method. I can reach the method def. with ctrl+lm so there is no problem with method name.
<h:body>
<h:form id="createAppUserForm" prependId="false">
....
<p:dialog id="newRoleDialogId"
header="Add New Role"
resizable="true"
draggable="true"
widgetVar="newRoleDetailsDialog"
appendToBody="true"
>
<p:panel id="newRoleDialogPanel">
<p:panelGrid id="newRoleDialogPanelGrid" columns="2" style="width: 100%" styleClass="panelGridWithoutBorder">
<h:outputText value="Role Name :"/>
<p:inputText value="#{createAppUserController.selectedRole.name}"/>
<h:outputText value="Role Desc :"/>
<p:inputText value="#{createAppUserController.selectedRole.description}"/>
</p:panelGrid>
<center>
<p:commandButton value="Save"
update="roleListDataTable newRoleDialogPanelGrid growlCreateAppUser"
oncomplete="if (!args.validationFailed) newRoleDetailsDialog.hide()"
action="#{createAppUserController.saveNewRole()}"/>
<p:commandButton value="Cancel"
immediate="true"
onclick="newRoleDetailsDialog.hide()" />
</center>
</p:panel>
</p:dialog>
</h:form>
</h:body>
4 answers
solution1
16 ACCPTED 2013-09-23 12:09:43
The dialog, when used with an appendToBody/appendTo="@Body" must have its own form.
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
Because, when the dialog is generated into HTML output, it's by JavaScript relocated to the end of HTML <body> which causes it to not be sitting in any form anymore. The generated HTML DOM tree ends up to look like this (use webbrowser's dev tools to see it):
<body>
...
<form id="createAppUserForm">
...
</form>
...
<div id="newRoleDialogId" class="ui-dialog ...">
...
</div>
</body>
The appendToBody="true" plays a role in here. The end of body ensures easy and best cross browser compatibility of displaying a modal dialog by JavaScript.
The same is true by the way for a p:overlayPanel with an appendTo...
But also make sure there is, before 'moving' the p:dialog , there is not a nested h:form . So prevent
<h:form>
...
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
...
</h:form>
Since although it ends up like
<body>
...
<form id="createAppUserForm">
...
</form>
...
<div id="newRoleDialogId" class="ui-dialog ...">
<form>
...
</form>
</div>
</body>
it is initially invalid html
See also:
solution2
2 2014-01-14 15:34:31
try this p:remoteCommand
http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml
this is my example
<h:commandButton value="Aceptar" type="button" onclick="irAConf()" class="art-button">
</h:commandButton>
<p:remoteCommand name="irAConf"
action="#{configuracionBean.irAConfiguracion}"/>
solution3
2 2019-12-05 06:39:33
将 (process="@this") 添加到 commandButton 对我有用。
solution4
0 2015-07-14 06:56:02
The appendToBody="true" plays a role in here. This attribute have been removed from in latest version. Please look for other alternative
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.