Question

我有一个输出面板如下：

<p:outputPanel id="panel1" >
...
</p:outputPanel>

在某些事件页面发生后会更新，如下面的menuitem点击：

<p:menuitem value="Menu 1" update=":panel1" ... />
<p:menuitem value="Menu 2" update=":panel1" ... />
<p:menuitem value="Menu 3" update=":panel1" ... />
<p:menuitem value="Menu 4" update=":panel1" ... />
<p:menuitem value="Menu 5" update=":panel1" ... />

我想捕获发生在panel1上的所有部分更新ajax事件，我目前正在使用BalusC https://stackoverflow.com/a/14400791的这个答案，如下所示：

<p:outputPanel autoUpdate="true">
        <h:outputScript id="getPartialUpdateEvent">
            getPartialUpdateEvent();
        </h:outputScript>
    </p:outputPanel>



function getPartialUpdateEvent(){
           var e = event || window.event;
           if(e!=null){
            var target = e.target || e.srcElement;
            if(target!=null && target.responseText!=null && target.responseText.indexOf('id="panel1"')>0){
                console.log("Partial Update on panel1");
            }
           }
         }

但这有一个问题。我无法在firefox中获取XMLHttpRequest OR事件对象，因此上面的javascript在firefox中不起作用。

有没有其他方法可以在所有浏览器的panel1上捕获此部分更新？提前谢谢！

Answer 1

在我看来非常好的＆＃39;泛型＆＃39;解决方案是覆盖PrimeFaces javascript ajax函数。如果你查看the source（可能它总是和你在一起），你会发现每个需要更新的元素总是会调用一个函数。如果你覆盖它并在调用原始函数后，请自己动手做＆＃39;。在此示例中（由我们使用），突出显示页面上更改的元素。

var originalPrimeFacesAjaxUtilsUpdateElement = PrimeFaces.ajax.Utils.updateElement;
PrimeFaces.ajax.Utils.updateElement = function(id, content, xhr) {
    //call the original function first that does the basic updating
    originalPrimeFacesAjaxUtilsUpdateElement.apply(this, arguments);
    // Do your work here... 
    if (id.contains("panel1")) {
      $(PrimeFaces.escapeClientId(id)).effect("highlight", {}, 3000);
      //console.log(id);
    }
};

当元素发生部分更新时捕获事件

1 个答案: