模态对话框无法正常工作

Question

我正在开发一个 JSF/Primefaces 应用程序。我想防止页面出现在 primefaces 对话框后面。我试过这段代码：

    <h:form id="form">
        <p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item" 
                     selection="#{resourcesTypesMBean.selectedResourceType}"
                     rowKey="#{item.id}" selectionMode="single">
            <f:facet name="header" >  
                <table style="border: hidden">
                    <tbody >
                        <tr >
                            <td align="left" style="border: hidden">
                                <p:outputLabel value="List of Resources' Types"/>
                            </td>
                            <td align="right" style="border: hidden">
                                <p:commandButton 
                                   oncomplete="ResourceTypeDialogNew.show()" 
                                   icon="ui-icon-plus" title="add"/>
                                <p:commandButton id="btnDelete" title="delete 
                      " actionListener="#{resourcesTypesMBean.deleteResourceType()}" 
                                 update="types" icon="ui-icon-trash" />
                                <p:button outcome="Resources.xhtml"
                               icon="ui-icon-arrowthick-1-w" title="back"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </f:facet> 
            <p:column headerText="Name">
                <p:outputLabel value="#{item.name}"/>
            </p:column>
            <p:column headerText="Code">
                <p:outputLabel value="#{item.code}"/>
            </p:column>
                    </p:dataTable>
    </h:form>

    <h:form id="newResourceTypeForm">
          <p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew" 
           resizable="false"  modal="true" appendTo="@(body)" showEffect="explode"
           hideEffect="explode"  style="position: absolute ;"
           id="dialogNewResourceType">  
            <p:panel id="panel">   
              <p:messages id="messages" />
              <p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px">  
                    <f:facet name="header">  
                        <p:graphicImage value="/images/resource.png"/>  
                    </f:facet>
                    <p:outputLabel value="Name" for="name"/>
                    <p:inputText id="name" value="#{resourcesTypesMBean.name}"   
                    required="true" requiredMessage="The Name field is required." />
                    <p:outputLabel value="Code" for="code"/>
                    <p:inputText id="code" value="#{resourcesTypesMBean.code}"  
                    required="true" requiredMessage="The Code field is required." />
                  </p:panelGrid> 
                <div align="right" >
                    <p:commandButton value="Save" style="margin-right: 5px" icon="ui-
                    icon-circle-check"  oncomplete=" handleSubmitRequest(xhr, status,
                    args, 'ResourceTypeDialogNew','newResourceTypeForm');" 
                    actionListener="#{resourcesTypesMBean.addResourceType()}" 
                    update=":form:types, :growl" /> 
                    <p:commandButton  value="Cancel"  
                    oncomplete="ResourceTypeDialogNew.hide();"
                    icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/>
                </div>
            </p:panel>
        </p:dialog>  
    </h:form>

显示对话框时，后面的页面被阻止，但save 和cancel 按钮无法正常工作，并且用户会自动从应用程序中注销。 我需要你的帮助。 更新：没有modal="true" appendTo="@(body)" 它可以正常工作（save 和cancel 按钮）。

Answer 1

现在无法检查解决方案的寿命，但以下内容看起来很可疑：

当您检查呈现的 XHTML 代码时（例如通过 Firefox 中的 Firebug），您可能会发现 newResourceTypeForm 表单实际上是空的。使用appendTo="@body", I guess, the dialog panel is attached directly to thebody` - 元素，并且通过它在任何公式之外。这可以防止按钮内部工作。

• 要么将表单移动到p:dialog，要么
• 尝试删除appendTo
• 尝试重写appendTo="@form"

希望其中之一可以帮助您继续前进，如果 - 点赞赞赏 - ...