9

我有 ap: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>
4

4 回答 4

16

对话框，当与 an 一起使用时，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 显示模式对话框的简单和最佳的跨浏览器兼容性。

顺便说一句，对于 a p:overlayPanelwith anappendTo...

但还要确保在“移动”之前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

也可以看看：

于 2013-09-23T12:09:43.907 回答
2

试试这个 p:remoteCommand

http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml

这是我的例子

<h:commandButton value="Aceptar" type="button" onclick="irAConf()" class="art-button">
</h:commandButton>

<p:remoteCommand name="irAConf"
action="#{configuracionBean.irAConfiguracion}"/>
于 2014-01-14T15:34:31.997 回答
2

将 (process="@this") 添加到 commandButton 对我有用。

于 2019-12-05T06:39:33.693 回答
0

appendToBody="true" 在这里起作用。此属性已从最新版本中删除。请寻找其他替代方案

于 2015-07-14T06:56:02.230 回答