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!

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!

• javascript
• jquery
• ajax
• jsf-2

Share Improve this question Follow asked May 29, 2011 at 6:56 BenBen 10.3k2121 gold badges103103 silver badges158158 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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
• plete: request recieved
• success: request succesfully processed (without errors)

Examples using this api:

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

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

Try to call jQuery this way:

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

That's correct. Different JSF implementations may use different AJAX engines, and the jQuery ajaxStart/ajaxStop only apply to those ponents that route AJAX requests through the jQuery $.ajax function.

In contrast, if you're using Primefaces, the jQuery ajaxStart/ajaxStop events will fire and the jsf.ajax.onEvent will not fire.