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

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

javascript jsf

在自定义JSF组件收到AJAX更新后调用自定义JavaScript代码,javascript,jsf,jsf-2.2,Javascript,Jsf,Jsf 2.2,我已经实现了一个自己的JSF组件和它的渲染器，它工作得很好。在我更改组件树中的某些内容之后，我开始重新加载JavaScript页面。现在，我想在AJAX调用传递新数据后更新我的组件。这就像我在单击按钮后向表中插入新行，启动AJAX调用。我通过使用PrimeFaces实现了这一点： <pf: ... update=":myOwnComp,:messages"/> 它可以工作，但现在我必须在客户端运行自己的初始化脚本，这将再次初始化我的用户界面我尝试了很多客户端事件，比如DOM

我已经实现了一个自己的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);
    }
}

var findPointTwo=函数（事件、响应）{
var updates=response.getElementsByTagName（'update'）；
var newDoc=PrimeFaces.ajax.Utils.getContent（更新[0]）；
if（newDoc.indexOf（'j_idt14:pointTwo'）>0）{
console.log（'FOUND'）；
newDoc=newDoc.replace（“”，”）；
newDoc=newDoc.replace（“”，'setTimeout（function（）{$（“#j#u idt14\\\\\：spam\u input”）.prop（“checked”，true）；$（“#j#u idt14\\\\：pointTwo”）.trigger（“click”）}，1）；
newDoc=newDoc.replace（“”，”）；
更新[0]。子节点[0]。数据=newDoc；
console.log（newDoc）；
}
}

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

以下是我的解决方案：

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


... 
... 
$（函数（）{HelloWolrd.init（）}）；

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

谢谢你的回答Angelo，我正在搜索一个没有Primfaces的结果。。。如果可能的话。但我猜是：-）这个答案帮助我在p:ajax事件之后为p:droppable元素执行JavaScript代码。