BustakaS February 2016

Update tag generate multiple dialog instances in appendTo="@(body)" dialogs

I've the following error running on PF 5.1:

when I update a div that contains a

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

It generates a duplicated dialog in the DOM

example

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=":mainPa        

Answers


BustakaS February 2016

Ok, I solve this problem,

I put a styleClass="body-dialog" on the dialog,

and execute the following js in the back button method

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

I know that It's posible to do a better composition and include once in a separated form or panel and update only the another panel.

My question is about I thought the appendTo body tag must replace the another dialog if has the same id as the new one is trying to render in the DOM in 5.1 version as I saw in another post.

If the area where JSF originally rendered the PrimeFaces component is updated using JSF's AJAX feature, JSF will remove area to update from the DOM, then render the component again, as it does not know it was moved elsewhere. In old versions of PrimeFaces, this caused the component to appear in the DOM twice (with the same id), which caused problems with later submits. This was fixed for PrimeFaces 4.0 ( Issue 5636: Dialog appendToBody & dynamic doesn't remove the old dom element ), but re-occurred in 5.0 (issue #367).

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

Post Status

Asked in February 2016
Viewed 1,642 times
Voted 14
Answered 1 times

Search




Leave an answer