jquery blockui plugin doesn't override the default 'waiting' message

Question

Can somebody please help me with these questions about using the jquery blockui plugin (http://jquery.malsup.com/block/#)?

1. Why doesnt's this work?

   $(document).ajaxStart($.blockUI({message: "wait..."})).ajaxStop($.unblockUI);
   

   If I just do this:

   $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
   

   it works, but I want to set override the default message with my own. This doesn't work either:

   $.blockUI({ message: "wait..." });
   

2. I've been able to override the message with this:

   $.blockUI.defaults.message = "wait...";

   but if I define a div in my page and pass it to the message property then it doesn't work, but according to the documentation in the plugin's website it should:

   <div id="loadingMessageBox" style="display: none;">
       <img src="../Images/spinning.gif" />wait...
   </div> 
   
   $.blockUI.defaults.message = $("#loadingMessageBox");
   

Thanks.

Answer 1

$(document).ajaxStart() takes a reference to a function as an argument. It provides a function for jquery to invoke in the future, when an ajax call starts. This is why the version that works is $document.ajaxStart($.blockUI) and not $document.ajaxStart($.blockUI())

Your second version, $.document.ajaxStart($.blockUI({message: 'wait...'}) is functionally equivalent to $document.ajaxStart($.blockUI()) - it is invoking the blockUI function immediately, not providing a reference to it.

The easiest (maybe not the best) way to fix this, if you don't want to change the default blouckUI message, is to wrap it in another function, something like this:

var ajaxBlock = function() { $.blockUI({message: 'wait...'}) }
$(document).ajaxStart(ajaxBlock);