在自定义 JSF 组件收到 AJAX 更新后调用自定义 JavaScript 代码

2024-03-14

我已经实现了自己的 JSF 组件及其渲染器,并且运行良好。目前,在更改组件树中的某些内容后,我开始重新加载 JavaScript 页面。现在我想在 AJAX 调用传递新数据后更新我的组件。这就像我在单击按钮后向表中插入新行,这会启动 AJAX 调用。 我通过使用 PrimeFaces 来运行它:

<pf: ... update=":myOwnComp,:messages"/>

它可以工作,但现在我必须在客户端运行自己的初始化脚本,这将再次初始化我的用户界面。

我尝试了很多客户端事件,例如DOMNodeInserted, onchanged, jsf.ajax.addOnEvent等等。这是行不通的。

如果能够让后端决定调用自定义 JavaScript 代码(也许可以通过将代码或函数调用添加到 AJAX 响应中),那就太酷了。

我希望有人能帮助我。


您说您正在使用 PrimeFaces。那么您可能对以下事件感兴趣:

  • pfAjaxStart
  • pfAjaxSend
  • pfAjaxError
  • pfAjaxSuccess
  • pfAjaxComplete

这些定义在primefaces.jar/META-INF/resource/primefaces/core/core.ajax.js

您可以使用 jQuery 来订阅事件,如下所示:

$( document ).on( 'pfAjaxSuccess', function(e, s) {
    console.log('pfAjaxSuccess');

    handle(e, s.responseXML);
});

然后您可以随意更改收到的标记...

var findPointTwo = function(event, response) {
    var updates = response.getElementsByTagName('update');
    var newDoc = PrimeFaces.ajax.Utils.getContent(updates[0]);


    if(newDoc.indexOf('j_idt14:pointTwo') > 0) {
        console.log('FOUND');
        newDoc = newDoc.replace('<body>', '<body><div style="display:none;">');
        newDoc = newDoc.replace('</form>', '<script>setTimeout(function() {$("#j_idt14\\\\:spam_input").prop("checked", true);$("#j_idt14\\\\:pointTwo").trigger("click");}, 1)</script></form>');
        newDoc = newDoc.replace('</body>', '</div></body>');
        updates[0].childNodes[0].data = newDoc;
        console.log(newDoc);
    }
}

例如,一些 JavaScript 被注入到表单的末尾。 当事件处理继续时,DOM 将更新,并且您注入的代码将被执行。请注意,上面的代码只是一个快速破解。可能有更好的方法来实现您想要实现的目标。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在自定义 JSF 组件收到 AJAX 更新后调用自定义 JavaScript 代码 的相关文章

随机推荐