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

【问题标题】：Invoke custom JavaScript code after a custom JSF component received an update by AJAX在自定义 JSF 组件收到 AJAX 更新后调用自定义 JavaScript 代码
【发布时间】：2015-02-11 03:13:52
【问题描述】：

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

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

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

我尝试了很多客户端事件，例如DOMNodeInserted、onchanged、jsf.ajax.addOnEvent 等。这不起作用。

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

我希望有人可以帮助我。

【问题讨论】：

标签： javascript jsf jsf-2.2

【解决方案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 将被更新，您注入的代码将被执行。请注意，上面的代码只是一个快速破解。可能有更好的方法来实现您想要实现的目标。

【讨论】：

感谢您的回答 Angelo，我正在寻找没有 Primfaces 的解决方案...如果可能的话。但我猜是:-)
这个答案帮助我在 p:droppable 元素的 p:ajax 事件之后执行 JavaScript 代码。
pfAjaxComplete 事件对我来说非常好，但在 dataScoller 刷新的情况下却不行。根据documentation，它使用ajax 加载下一个块，但没有触发任何引用的事件。有谁知道我可能做错了什么？

【解决方案2】：

这是我的解决方案：

我已经实现了自己的部分响应编写器来解决这个问题。现在我可以将标签设置为部分响应。（部分响应是一个由后端传递的xml文档。该文档包含一组命令和数据，将由客户端的jsf javascript lib处理。例如“更新输入字段的数据”）。在通过 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 渲染器后设置了这个标签。

【讨论】：