Wednesday, June 26, 2013

Cancel JSF ajax call from javascript

suppose you have a jsf ajax attach to some UICommand like this

 <f:ajax ...></f:ajax>


How can you stop the ajax call in some situation? If you have control the source, you can always attach a onClick to the UICommand component. But in some situation, you do not have access to source. For example, the ajax is provided by some third-party component. You do not want to mess up with their components.

Here I come up a easy solution for this. First, I have a small js library.

var FxJSFBegin = "JSFBegin";
if (jsf) {
    var originalRequest = jsf.ajax.request;
    jsf.ajax.request = function(source, oevent, options) {
        var event = $.Event(FxJSFBegin);
        event.options = options;
        event.originalEvent = oevent;
        $(source).trigger(event);
        if (event.isDefaultPrevented()) {
            return;
        } else {
            originalRequest.apply(null, arguments);
        }
    };
}

This piece code proxies original JSF ajax call. It uses jQuery to fire a "JSFBegin" event. Integration code can listen this event using jQuery mechanism. Listener can cancel the jsf call using event.preventDefault().

Requirement:
  1. jQuery
  2. This piece code should be placed after jsf.js is loaded.