How can I call a JavaScript function after every a4j AJAX answer?

Question

I am working on a web application using JSF w / Seam. I want to be able to call a JavaScript function after each ajax response. I am looking for a way to do this without adding an oncomplete attribute for every commandLink / commandButton file on every page.

I think there is a way to configure a servlet filter (interceptor? I get vague terms) to inject a JS call into every response. I am going to learn this. In the meantime, if anyone has any other suggestions, I'm all ears.

EDIT: I think the jQuery ajaxSuccess method might be here, but I'm not sure how to use it. I can not register anything. I basically want to add code to get any and all ajax requests from any source, to call my JavaScript method on success. Can someone show me the correct way to do this? I tried several ways to do this, including adding jQuery("*").ajaxSuccess(function(){myFunction();});an xhtml file to the end of my template.

Answer 1

Rewritten answer: see original answer in change history

send XMLHttpRequest , readystatechange:

(function () 
{ 
    var xhrSend = XMLHttpRequest.prototype.send; 
    XMLHttpRequest.prototype.send = function  () 
     { 
        var handler = this.onreadystatechange; 
        this.onreadystatechange = function () 
        { 
            if (handler) {
                if (handler.handleEvent) handler.handleEvent.apply(xhr, arguments);
                else handler.apply(xhr, arguments);
            }
            if (this.readyState == 4) 
            { 
                // your oncomplete function here 
                this.onreadystatechange = handler; 
             } 
         }; 
        xhrSend.apply(this, arguments); 
    }; 
})(); 

: jQuery, . setTimeout hack , . , jQuery .ajaxSuccess(), .

(function() {
    function globalHandler() {
        if (this.readyState == 4) {
            // your oncomplete code here
        }
    }
    var xhrSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function() {
        var xhr = this;
        if (xhr.addEventListener) {
            xhr.removeEventListener("readystatechange", globalHandler);
            xhr.addEventListener("readystatechange", globalHandler, false);
        }
        else {
            function readyStateChange() {
                if (handler) {
                    if (handler.handleEvent)
                        handler.handleEvent.apply(xhr, arguments);
                    else
                        handler.apply(xhr, arguments);
                }
                globalHandler.apply(xhr, arguments);
                setReadyStateChange();
            }
            function setReadyStateChange() {
                setTimeout(function() {
                    if (xhr.onreadystatechange != readyStateChange) {
                        handler = xhr.onreadystatechange;
                        xhr.onreadystatechange = readyStateChange;
                    }
                }, 1);
            }
            var handler;
            setReadyStateChange();
        }
        xhrSend.apply(xhr, arguments);
    };
})();

http://jsfiddle.net/gilly3/FuacA/5/
IE7-9, Chrome FF

Answer 2

RichFaces, :

<a:status id="globalStatus" onstart="onRequestStart()" onstop="onRequestEnd()" />

Answer 3

Using a4j: status should work, but it should be inside the h: form tag:

<h:form id="randomForm" styleClass="edit">
        <a:status id="stateStatus"
         onstart="Richfaces.showModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=true;"
         onstop="Richfaces.hideModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=false;"
        styleClass="message" >
</a:status>

...... way more code  
</form> 

After each ajax call, it pops up a wait image and disables the search button.

Interestingly, at least in our code, this does not work anything in the nested a4j: area.

Answer 4

I think this is what you are looking for: Using Ajax global handlers in jQuery