Question

我在PF 5.1上运行了以下错误：

当我更新包含

的div时

<p:dialog appendTo="@(body)" .... ></p:dialog>

它在DOM中生成一个重复的对话框

例如

main.xhtml

<h:body>
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">
            <h:form id="formGrowl">
                <p:growl id="growl" showDetail="true" showSummary="false" autoUpdate="true" />
            </h:form>
            <h:panelGroup id="mainPanel" style="background: #FFFFFF;" layout="block">

                <p:scrollPanel mode="native">
                    <h:panelGroup layout="block" style="padding: 1em;">

                    <p:commandButton value="Go to page with dialog"
                        action="#{myController.goToPageWithDialog}" update=":mainPanel"></p:commandButton>
                </h:panelGroup>
                    <c:if test="#{myController.renderPageWithDialog}">
                        <h:panelGroup>
                            <ui:include src="/pageWithDialog.xhtml"></ui:include>
                        </h:panelGroup>
                    </c:if>


        </ui:define>
    </ui:composition>
</h:body>
</html>

pageWithDialog.xhtml

<h:body>
    <ui:composition>
        <h:form>
            <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Hello" />
                        <p:inputText value="#{myController.name}"></p:inputText>
                    </h:panelGrid>

                    <p:panel>
                        <p:commandButton value="Back"
                            action="#{myController.goBack}" update=":mainPanel"></p:commandButton>

                        <p:commandButton value="#{diccionarioBean.msg['comunes.continuar']}" style="float:right;" process="@form"
                            oncomplete="PF('dialog').show();"></p:commandButton>
                    </p:panel>

                </p:panel>
            </p:panel>
        </h:form>
        <p:dialog id="idDialog" widgetVar="dialog" modal="true" appendTo="@(body)"
            header="Confirm" closable="false" width="400">
            <h:form>
                <h:panelGroup layout="block">
                    <strong>Are u sure?</strong>
                <p:separator />
                <h:panelGroup layout="block" style="text-align:center;">
                    <p:commandButton value="Yes" process="@this"
                        action="#{myController.action}" update=":formGrowl"></p:commandButton>
                    <p:commandButton value="No"
                        oncomplete="PF('dialog').hide();"></p:commandButton>
                </h:panelGroup>
            </h:form>
        </p:dialog>
    </ui:composition>
</h:body>

点击goToPageWithDialog - ＆gt;后退按钮 - ＆gt; goToPageWithDialog - ＆gt;它在DOM中呈现两次对话框。（很多时候你重复这个动作）

Answer 1

好的，我解决了这个问题，

我在对话框上放了一个styleClass="body-dialog"，

并在后退按钮方法

中执行以下js

RequestContext.getCurrentInstance().execute("$('.body-dialog').destroy();");

我知道做一个更好的构图并且可以在一个单独的表格或面板中包含一次并且只更新另一个面板是可行的。

我的问题是关于我认为appendTo正文标记必须替换另一个对话框，如果它具有与新版本相同的id尝试在5.1版本的DOM中呈现，就像我在另一篇文章中看到的那样。

如果JSF最初呈现PrimeFaces组件的区域是使用JSF的AJAX功能更新，JSF将删除要更新的区域 DOM，然后再次渲染组件，因为它不知道它是什么搬到其他地方在旧版本的PrimeFaces中，这导致了组件出现在DOM中两次（具有相同的id），这导致后来提交的问题。这是针对PrimeFaces 4.0修正的（问题 5636：Dialog appendToBody＆amp; dynamic不会删除旧的dom元素），但在5.0（问题＃367）中重新出现。

https://code.google.com/archive/p/primefaces/issues/5636

更新标记在appendTo =＆＃34; @（body）＆＃34;中生成多个对话框实例。对话

1 个答案: