capture event when partial update happens for a element

Question

I have a output panel as follows:

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

which gets updated after some event page happens like following menuitem is clicked:

<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" ... />

I want to capture all partial update ajax events that happen on panel1, i am currently using this answer by BalusC https://stackoverflow.com/a/14400791, as follows:

<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");
            }
           }
         }

But there is a problem with this. I am not able to get the XMLHttpRequest OR event object in firefox and hence the above javascript does not work in firefox.

Is there any other way to capture this partial update on panel1 for all browsers? Thanks in advance!

Does this work in other browsers? Personally I'd try this: http://stackoverflow.com/questions/14764619/primefaces-default-oncomplete-method-for-all-ajax-request and in there check if panel1 is one of the id's to be updated and 'do your thing' — Kukeltje, Nov 27 '15 at 12:58
yes kukeltje... the above solution works in all other browsers but NOT in firefox as window.event is undefined in that case. I will check out your link, thanks — dev009, Nov 27 '15 at 13:22

Kukeltje · Accepted Answer · 2015-11-27T23:09:21.603

An in my opinion very nice 'generic' solution is overriding a PrimeFaces javascript ajax function. If you check out the source (may it always be with you) you can see that one function is always called for each elemement that needs to be updated. If you override that and AFTER calling the original function, do your own 'thing'. In this example (used for real by us), the elements that are changed on a page are highlighted.

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);
    }
};

thanks! this works... id.contains("panel1") gives an error and hence replaced with id=="panel1", but this works. — dev009, Nov 30 '15 at 09:29

capture event when partial update happens for a element

1 Answers1