f:ajax and jquery's `$(document).ajaxStart` dont work together?

Question

I'm trying to get a 'loading' div for my ajaxified website. using JSF 2.0's f:ajax tag for adding ajax to the website and 'trying' to make the loadin div show using jQuery $(document).ajaxStart function.

The jQuery code part looks like this:

$(document).ajaxStart(function(){
    console.log("ajax start");
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){
    console.log("ajax end");
  $('#ajaxBusy').hide();
});

The log functions are never called. Any Idea why? Do JSF ajax and javascript ajax not work together?

Thanks!

Answer 1

You should use jsf.ajax.addOnEvent(callback) to display a loading div. Maybe addOnError too.

See the documentation

jsf.ajax.addOnEvent(statusUpdate);
...
var statusUpdate = function statusUpdate(data) {
...
}

You will need to work with data.status

• begin: before the request is sent
• complete: request recieved
• success: request succesfully processed (without errors)

Examples using this api:

• http://weblogs.java.net/blog/driscoll/archive/2009/10/19/request-aggregation-jsf-2-ajax
• http://weblogs.java.net/blog/driscoll/archive/2009/05/jsf_2_ajax_even.html

Answer 2

The shorthand $ can be the problem if using jsf, component libraries and jquery.

Try to call jQuery this way:

jQuery(document).ajaxStart(function(){ ... });