Dialogs keep being added/duplicating in the UI

Primefaces 2.2 RC1, Glassfish 3.0.1, NetBeans IDE 6.9 (Build 201006101454)

This will a little too complex to give a test case, so I will try first to report this issue and see if anyone had similarly experience this. This has occurred also on 2.2 M1.

I have a tabView with tabs that are loaded dynamically based on menu selections. On some of the tabs I have a composite button that opens a dialog. The first time I access this dialog clicking the button, all shows fine. As I go through some other tabs and return to the tab where the dialog was first invoked, the dialog opens twice (one overlapping the other). I need to close the front-most dialog so I can trigger the appropriate selection on the underlying one. As I go through other tabs again I keep on seeing more overlapping dialogs progressively, and overall the application keeps on slowing down.

It appeared to me that the additional dialogs HTML gets added to the bottom of the page's html, outside the form. Somehow things are progressively added to the HTML.

Anyone has an idea on how to avoid this ? I have named widgets and ids and that did not help.

I've never seen tha. I know its complex but if you provide a test case which we can reproduce im sure we will find whats going on.

I have had problems with multiple dialogs opening on top of each other... and its always been related to updating the dialog before opening it...

for example

Code: Select all

            <h:form id="xxx">
              <p:commandButton value="test" update="xxx" oncomplete="yyy.show()"/>
              <p:dialog widgetVar="yyy">
                  <h:outputText value="sfgsdfsdf"/>
              </p:dialog>
            </h:form>

maybe you are doing something similar?

I have no problems updating dialogs before openning them, for example if i have dinamic content in a dialog i update an outputPanel inside the dialog and if i have dinamic header in a dialog i update an outputPanel outside the dialog but never update the dialog itself.

[optimus.prime]

When working with dialog, you never should update the dialog, it will corrupt the dom, result in unexpected behavior. Instead update a container (outputPanel) inside the dialog. Example;

http://www.primefaces.org/showcase/ui/spinner.jsf

Following the latest suggestion, I added an outputPanel wrapping teh inner of the dialog, but it did not improve the issue. Prior to that the update was also oriented only to the p:tree component and not the dialog directly. The following is the JSF code. The first part shows a label and an icon that once activated shows the dialog in a lazy-load perspective, as the tree needs to be composed and then the dialog show. I am also having the same issue on a simpler scenario that does not involve a tree nor lazy-loading, but just a dialog and some data.

I will attempt to create a test-case. Thanks for your responses so far.

Code: Select all

        <h:panelGrid columns="2" rendered="#{cc.attrs.render}">
            <h:outputLabel  id="treeNodeLabel" value="#{cc.attrs.value}" converter="#{treeNodeController.converter}" />
            <h:outputLink value="javascript:void(0)" onclick="lazyload();treeDialog.show()">
                <h:graphicImage style="border-width:0px;vertical-align: bottom;" url="/resources/images/icons/tree.png"/>
            </h:outputLink>
        </h:panelGrid>

        <p:dialog id="treeDialog" widgetVar="treeDialog" header="Tree Node Selector" width="600" height="300"
                  closeListener="#{dialogBean.handleClose}"
                  resizable="true" showEffect="clip" hideEffect="clip">
            <p:outputPanel id="treePanel">
                <p:tree id="tree" widgetVar="tree" value="#{treeNodeSelectorBean.root}" var="node"
                        selectionMode="single" selection="#{treeNodeSelectorBean.selectedNode}"
                        nodeSelectListener="#{treeNodeSelectorBean.nodeSelected}" onselectComplete="tree.hide();alignPageArtifacts()"
                        propagateSelectionUp="false"
                        propagateSelectionDown="false"   >
                    <p:treeNode>
                        <h:outputText value="#{node.label}" />
                    </p:treeNode>
                </p:tree>
            </p:outputPanel>
        </p:dialog>

        <p:remoteCommand  name="lazyload" action="#{treeNodeSelectorBean.prepareTree(navigationBean.libraryTreeHeaderId, cc.attrs.recipientProperty)}" update="treePanel" >
        </p:remoteCommand>

        <p:remoteCommand  name="alignPageArtifacts"  update="treeNodeLabel">
        </p:remoteCommand>

Thinking further, I think that Prime's response may indicate the problem I am indeed having. I do actually update not the dialog itself but a parent most component that contains the dialog and other components. In my case I update the tabView that contains all of my tabs that have underlying composites such as the tree dialog in my previous note.

Would this be an issue ? Just to clarify, is it discouraged to update a tab/tabView as it may contain many artifacts ? Are there other components that may have this similar issue such as the dialog ? Sorry for the many related questions, but I want to understand what is "updatable" and what isn't and uderstand its limitations. Thank you.

I have the same issue. I think their point is to never update a dialog directly OR any of the dialogs parents. But updating a dialogs childs are ok. I need my dialog inside the same form that gets updated though, since the button on the dialog is supposed to submit that form.... so I'll have to think of a different solution.

[optimus.prime]

Does adding form option to commandButton sounds good, by default commandButton submits it's parent form with or without ajax, imagine this, you can define a form attribute and provide the id of the form to submit. This will be very flexible, just thinking, what is your opinion?

It sounds good to me... http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=5666