我有一个 p:dialog，里面有一个面板。问题是“保存”按钮的操作方法不起作用。它甚至不调用该方法。我可以到达方法 def 。用ctrl+lm所以方法名没有问题。
<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>
最佳答案
与 appendToBody/appendTo="@Body" 一起使用时的对话框必须有自己的形式。
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
因为，当对话框生成为 HTML 输出时，它是由 JavaScript 重新定位到 HTML <body> 的末尾。这导致它不再以任何形式存在。生成的 HTML DOM 树最终如下所示(使用 webbrowser 的开发工具查看):
<body>
...
<form id="createAppUserForm">
...
</form>
...
<div id="newRoleDialogId" class="ui-dialog ...">
...
</div>
</body>
appendToBody="true"在这里发挥作用。正文的末尾确保了通过 JavaScript 显示模式对话框的简单且最佳的跨浏览器兼容性。
顺便说一句，p:overlayPanel 也是如此。与 appendTo...
但在“移动”之前还要确保 p:dialog 存在，没有嵌套 h:form 。所以要防止
<h:form>
...
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
...
</h:form>
虽然最终结果是这样的
<body>
...
<form id="createAppUserForm">
...
</form>
...
<div id="newRoleDialogId" class="ui-dialog ...">
<form>
...
</form>
</div>
</body>
它最初是无效的 html
另请参阅:
关于jsf - p :commandbutton action doesn't work inside p:dialog，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18958729/