Question

我已经实现了一个自己的JSF组件及其渲染器，它工作正常。目前，在我更改了组件树中的某些内容后，我开始重新加载JavaScript页面。现在我想在AJAX调用传递新数据后更新我的组件。这就像我在单击一个按钮后向表中插入新行，这会启动一个AJAX调用。我使用PrimeFaces运行了这个：

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

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

我尝试过很多客户端活动，例如DOMNodeInserted，onchanged，jsf.ajax.addOnEvent等。这不起作用。

如果有可能让后端决定调用自定义JavaScript代码，可能通过将代码或函数调用添加到AJAX响应中，那将会很酷。

我希望有人可以帮助我。

Answer 1

你说你正在使用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将得到更新，并且您的注入代码将被执行。请注意，上面的代码只是一个快速的黑客。可能有更好的方法来实现您想要实现的目标。

Answer 2

这是我的解决方案：

我已经实现了自己的部分响应编写器来解决这个问题。现在，我可以将标记设置为部分响应。（部分响应是由后端提供的xml文档。该文档包含一组命令和数据，将由客户端的jsf javascript lib处理。例如＆＃34;更新输入字段的数据＆＃34 ）。在通过ajax调用更新组件之后，标记允许客户端调用我的javascript init函数：

<partial-response id="j_id1">
   <changes>
     <update id="jdt_2"> ... </update>
     <update id="jdt_3"> ... </update>
     <eval>$(function(){HelloWolrd.init()});</eval>
   </changes>
</partial-response>

我在处理完jsf渲染器后设置了这个标签。

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

2 个答案: