PrimeFaces Dialog + appendToBody=true 不工作答案

【问题标题】：PrimeFaces Dialog + appendToBody=true not workingPrimeFaces Dialog + appendToBody=true 不工作
【发布时间】：2013-09-07 14:40:05
【问题描述】：

我正在使用 PF 3.5 和 JSF Mojarra 2.1。

我有一个对话框，我想使用 appendToBody=true。不过，这通常会导致“不可预测的行为”。

对话框的作用基本上是，当我从数据表中选择一个条目（一个 persn 实体）时，它会填满我可以编辑的输入框，从而编辑特定条目（个人详细信息）。

有时输入框会被条目数据正确填满。有时他们没有。 appendToBody=false 不会发生此行为。除此之外，我很确定没有嵌套表单。

您会注意到，我正在尝试使用纯 ajax 导航的“单页设计”。

主页（index.xhtml）

<h:body>

    <pe:layout id="page" fullPage="true">

        <!-- North -->
        <pe:layoutPane id="north" position="north" minSize="140"
            closable="true" resizable="false">
            ....
        </pe:layoutPane>

        <!-- West -->
        <pe:layoutPane id="west" position="west" minWidth="150" size="180"
            style="font-size: 14px !important;" closable="true"
            styleClassHeader="menuBar" resizable="false">
            <f:facet name="header">Main Menu</f:facet>

            <h:form id="form1">

                <p:panelMenu id="panelMenu" style="width: 160px !important">

                    <!-- On menu click update with Ajax centerpanel and msgPanel -->
                    <p:submenu label="Persons" style="font-size: 10px ">

                        <p:menuitem value="Person List" update=":centerpanel"
                            actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}"
                            action="#{person.init()}">
                        </p:menuitem>

                    </p:submenu>

                    .....

                </p:panelMenu>
            </h:form>
        </pe:layoutPane>

        <!-- Center -->
        <pe:layoutPane id="content" position="center"
            style="font-size: 14px !important" styleClassHeader="menuBar">

            <h:panelGroup id="centerpanel" layout="block">
                <ui:include id="include" src="#{layout.navigation}" />

            </h:panelGroup>

        </pe:layoutPane>
    </pe:layout>

对话框在文件 formPersonList.xhtml 中并且在表单之外

<ui:composition ....> 

      <h:form id="mainForm">
            <p:contextMenu for="personTable">

                <p:menuitem value="View Details" 
                            process="@form" actionListener="#{person.handleSelectedPerson()}"
                            update=":dlgPersonGrp"
                            oncomplete="dlgPerson.show();">
                </p:menuitem>

            </p:contextMenu>

        <p:dataTable id="personTable ....>
            ....person entities
        </p:dataTable>

      </h:form>

    <p:dialog   widgetVar="dlgPerson" showEffect="size"
                width="1100"  appendToBody="true">

                <h:panelGroup id="dlgPersonGrp">
                    <ui:include src="formPerson.xhtml" />
                </h:panelGroup>

     </p:dialog>
</ui:composition>

最后是带有输入框的表单：formPerson.xhtml

<ui:composition ....> 

      <h:form id ="subForm">
                ....Input boxes that are supposed to be filled up from a backing bean 
                    and then resubmitted to edit the chosen entry


      </h:form>

</ui:composition>

我试图尽可能地降低它。如果您需要更多详细信息，请告诉我。

【问题讨论】：

您的对话没有表格。这是第一个大红灯。
表单在 formPerson.xhtml 中，包含在对话框中（最后一个代码部分）。它是 id = "subForm"。我假设它可以作为对话框表单，除非它也应该在面板组之外。
但是你有 appendToBody="true"，所以你需要一个表格。无论如何，您发布的代码有问题，因为您将有表单，这是非法的并且不会起作用。

标签： jsf jsf-2 primefaces facelets

【解决方案1】：

我知道这是一个老问题，但我在使用 Primefaces 5 时遇到了同样的问题。解决方案很简单，我在标签中添加了属性 appendTo="@(body)"。

<p:dialog header="Title" widgetVar="dlg" modal="true" appendTo="@(body)">
  <h:outputText value="Dialog text..." />
  <p:commandButton value="Ok" onclick="PF('dlg').close()" />
</p:dialog>

【讨论】：

上下文中的@是什么意思？

【解决方案2】：

也许答案是不使用 appendToBody。你真的需要吗？

使用 appendToBody 的一个常见原因是避免将模态对话框放入布局中导致的错误。正如您已经指出的那样，这种解决方法会导致“不可预测的行为”。更好的方法是将对话框放在布局之外。

更多详情请看：

【讨论】：