CODEWITHSUNDEEP
javaajaxjsftinymce
Menno
Menno

Reputation: 12641

Javascript on (before and after) every Ajax-call

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).

Upvotes: 6

Views: 2991

Answers (2)

BalusC
BalusC

Reputation: 1109292

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.

Upvotes: 8

skuntsel
skuntsel

Reputation: 11742

There is an onevent attribute of JSF's <f:ajax> tag, that's used to perform AJAX tasks within a JSF application. Basically it specifies a JavaScript function that's called thrice: before AJAX call is sent, after AJAX response is received and after HTML DOM is updated. Exactly for this purpose PrimeFaces has split those callbacks into onstart, onsuccess, oncomplete and onerror respectively.

Not to be repetitive, you can find usage example in the answer to How to re-execute javascript function after form reRender?.

Upvotes: 0

Related Questions