Jquery block UI when ajax starts

Question

I am trying to show blockui when ajax starts like so:

 // block when ajax activity starts
    $(document).ajaxStart($.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }));

and then I want to stop it doing

 // unblock when ajax activity stops 
    $(document).ajaxStop($.unblockUI); 

Problem Is that it won't load when ajax is performed what have I done wrong'??

Answer 1

I think you need to change it like so:

$(document).ajaxStart(function () {
  $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
});

When you need to pass parameters to the function you want to bind you should use an anonymous function and then call your method inside it. $.blockUI() returns something which is not callable, so it doesn't work to bind it that way.

Answer 2

According to the jQuery documentation:

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

So perhaps you have other AJAX requests that are preventing this event from firing?