2

I have a list element detail form opening inside a p:dialog. This p:dialog in turn shows another list. From this list, I can open any of its element's details inside a nested p:dialog.

The problem is: every time I open a dialog, a new set of ids for the elements in the nested dialog is generated, with the same value.

What I end up with in my DOM when I try to select a particular id from the nested dialog, such as $('#manageIssue\\:newEventComment');, is an array of elements with the same id.

enter image description here

I have determined there is one copy per each time I open a dialog, plus another one which is there from the beginning.

The nested dialog DOM nodes are not being destroyed when the nested dialog is closed, and a fresh set with overlapping ids is being generated every time a dialog is opened.

This question is related to primefaces update attribute not working on modal dialog opened from modal dialog.

(I solved the original problem by removing the prependId attribute from the form, but this one remained.)

Because this problem is a little difficult to reproduce, I have built a MCVE. All the stuff (backing beans, views, pom.xml, etc.) adds up to ~500 lines of code, so I have shared it on a github repo: https://github.com/elcodedocle/testt

The question here boils down to:

How can I make this MCVE work (i.e. add events with comments to an issue from a list of issues of a commission from a list of commissions), without this line:

https://github.com/elcodedocle/testt/blob/fbfeb7fca474c66c202c92e469ca185c6bf569c2/src/main/webapp/views/widgets/issue_detail_edit.xhtml#L21

?

Community
  • 1
  • 1
NotGaeL
  • 8,344
  • 5
  • 40
  • 70

1 Answers1

4

This problem is caused by nested <p:dialog>.

<p:dialog id="commissionDetail">
    ...
    <p:dialog id="issueDetail">
        ...
    </p:dialog>
</p:dialog>

This is not allowed. The technical reason is, the HTML DOM element representing the dialog is by JavaScript relocated to the very end of <body> in order to ensure best cross browser compatibility as to calculating the z-index and offset. Then, when you ajax-update the dialog, the existing dialog couldn't be found in its original parent element in the DOM, so simply a new one is added to DOM (which then get relocated to end of body again, etc).

You really need to restructure your templates so you ultimately end up like

<p:dialog id="commissionDetail">
    ...
</p:dialog>
<p:dialog id="issueDetail">
    ...
</p:dialog>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555