Primefaces 嵌套 p:dialog DOM 节点重复答案

【问题标题】：Primefaces nested p:dialog DOM node duplicatesPrimefaces 嵌套 p:dialog DOM 节点重复
【发布时间】：2016-01-28 20:33:20
【问题描述】：

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

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

当我尝试从嵌套对话框中选择特定 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 工作（即，将带有 cmets 的事件添加到来自委托列表的委托问题列表中的问题），没有此行：

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

【问题讨论】：

标签： ajax jsf primefaces jquery-ui-dialog

【解决方案1】：

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

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

这是不允许的。技术原因是，代表对话框的 HTML DOM 元素被 JavaScript 重新定位到 <body> 的最后，以确保在计算 z-index 和偏移时获得最佳跨浏览器兼容性。然后，当您对对话框进行 ajax 更新时，无法在 DOM 的原始父元素中找到现有对话框，因此只需将一个新对话框添加到 DOM（然后再次重新定位到正文的末尾，等等）。

你真的需要重新构建你的模板，这样你最终会像

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

【讨论】：

太棒了！这解决了这个问题。非常感谢你:-)