Javascript on (before and after) every Ajax-call

Question

Since I'm working with TinyMCE (please don't go into "Primefaces has an editor" or anything similar) I need to execute a small piece of Javascript before and after every Ajax-call. I'd prefer not to edit every Ajax-call for this since there are a lot (and doing so will be bad practice for any future maintenance).

What would be the most elegant solution to execute Javascript pre- and post- any Ajax-call on the page?

Note: I'm using a custom composite for the TinyMCE-textarea. Any events too this object would also suffice. Though keep in mind that the actual Ajax-trigger might be invoked by a totally different object (though could nevertheless rerender the composite).

Answer 1

Use the jsf.ajax.addOnEvent handler.

jsf.ajax.addOnEvent(function(data) {
    switch(data.status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            // In case you're interested in error handling, use jsf.ajax.addOnError handler.
            break;
    }
});

Just put it in a JS file which is included by <h:outputScript target="head"> in the <h:body> of the desired pages. This will ensure that it's loaded after JSF's own jsf.js containing the jsf namespace.