Primefaces 嵌套 p:dialog DOM 节点重复

Question

我在 p:dialog 中打开了一个列表元素详细信息表单。这个p:dialog又显示了另一个列表。从此列表中，我可以在嵌套的 p:dialog.

中打开其元素的任何详细信息

问题是：每次我打开一个对话框，都会为嵌套对话框中的元素生成一组新的 id，具有相同的值。

当我尝试从嵌套对话框中 select 一个特定的 id，例如 $('#manageIssue\:newEventComment');，我在 DOM 中得到的是一个数组个具有相同 ID 的元素。

我确定每次打开对话框时都有一个副本，另外还有一个从一开始就有的。

嵌套对话框 DOM 节点在嵌套对话框关闭时不会被销毁，每次打开对话框时都会生成具有重叠 ID 的新集.

此问题与primefaces update attribute not working on modal dialog opened from modal dialog有关。

（我通过从表单中删除 prependId 属性解决了最初的问题，但这个仍然存在。）

因为这个问题有点难复现，所以自己搭建了一个MCVE。所有的东西（支持 bean、视图、pom.xml 等）加起来大约有 500 行代码，所以我在 github 存储库上分享了它：https://github.com/elcodedocle/testt

这里的问题归结为：

如何在没有此行的情况下使此 MCVE 工作（即，将带有评论的事件添加到来自委员会列表的委员会问题列表中的问题）：

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

?

Answer 1

这个问题是由嵌套<p:dialog>引起的。

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

这是不允许的。技术原因是，表示对话框的 HTML DOM 元素被 JavaScript 重新定位到 <body> 的末尾，以确保在计算z-index 和偏移量。然后，当您 ajax-update 对话框时，无法在 DOM 中的原始 parent 元素中找到现有对话框，因此只需将一个新的添加到 DOM （然后再次重新定位到 body 的末尾，等等）。

您确实需要重组您的模板，这样您最终会像

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

Primefaces 嵌套 p:dialog DOM 节点重复

Primefaces nested p:dialog DOM node duplicates

ajax

jsf

primefaces

jquery-ui-dialog