ajax - Primefaces 嵌套 p :dialog DOM node duplicates

标签 ajax jsf primefaces jquery-ui-dialog

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

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

当我尝试从嵌套对话框中选择特定的 id(例如 $('#manageIssue\\:newEventComment');)时,我在 DOM 中最终得到的结果是 具有相同 id 的元素的数组

enter image description here

我已经确定每次打开对话框时都会有一个副本,另外还有一个从一开始就存在的副本。

关闭嵌套对话框时,嵌套对话框 DOM 节点不会被销毁,并且每次打开对话框时都会生成具有重叠 id 的新集合

此问题与 primefaces update attribute not working on modal dialog opened from modal dialog 相关.

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

因为这个问题重现起来有点困难,所以我构建了一个MCVE。所有的东西(支持 bean、 View 、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

最佳答案

此问题是由嵌套 <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>

关于ajax - Primefaces 嵌套 p :dialog DOM node duplicates,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33401724/

相关文章:

Android:触发 AJAX 功能不起作用

java - 无法从 JSF 读取 Java 文件

jsf - 是否有可能在 'Update' 方法完成之前调用 'Action' Ui 组件?

jsf - p :autoComplete itemLabel throws "The class ' java. lang.String' 没有属性 'label' 。”

javascript - 使用 Ember.js 从 Post 请求接收服务器响应中的 JSON API

javascript - Ajax 在 setInterval 上被调用两次

php - 无法获取 Ajax 更新表单以使用反序列化

java - JAAS tomcat 登录模块传递 ip 地址的可能方法

tomcat - 如何使用 primefaces 在 apache tomcat 中上传文件?

internet-explorer - p :media with PDF file causes "File does not begin with ' %PDF -'." error in IE7