jQuery ajax beforeSend
Your problem is the async:false
flag. Besides the fact that it is bad practice (and really only makes sense in a very limited number of cases), it actually messes with the order of execution of the rest of the code. Here is why:
It seems that somewhere in the blockUI
code they are setting a setTimeout
. As a result, the blockUI
code waits a very short amount of time. Since the next instruction in the queue is the ajax()
call, the blockUI
execution gets placed right behind that. And since you are using async:false
, it has to wait until the complete ajax
call is completed before it can be run.
In detail, here is what happens:
- You call
blockUI
blockUI
has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line,ajax()
will be run first)ajax()
is called withasync:false
, which means JS stops everything until the request returnsajax()
returns successfully and JS execution can continue- the setTimeout inside
blockUI
code is probably over, so it will be executed next - it looks like
blockUI
runs as part ofsuccess
, but in reality, it has just been queued up because of a timeout
If you would NOT use async:false
, the execution would go as followed:
- You call
blockUI
blockUI
has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line,ajax()
will be run first)ajax()
is called and sends of a request to the server.- while it is connecting to the server, normal JS execution continues
- the setTimeout inside
blockUI
code is probably over, so it will be executed next - the
blockUI
text shows up - unless there is more JS code somewhere, JS execution is done until the AJAX
success
andcomplete
callbacks are executed
Here are some jsFiddle examples to demonstrate the problem:
Example 1: This is the situation you are experiencing. The blockUI
text doesn't show until after the ajax
call executes.
Example 2: This is the exact same situation as yours, but with an alert
before the ajax
call. Because there is an alert
, the timeout inside blockUI
places the appearance of the blockUI
text after the alert
instead of after the ajax
.
Example 3: This is how it is supposed to work without async:false
This is most probably because of async : false
. As your call is synchronous,
after your call to the $.ajax()
function begins, nothing happens until the response is received, and the next thing as far as your code goes will be the success
handler
To make it work, You can do something like this
$.blockUI({
fadeIn : 0,
fadeOut : 0,
showOverlay : false
});
// and here goes your synchronous ajax call
$.ajax({
type : 'POST',
url : url,
async : false,
data : postData,
success : function (returnData) {
//stuff
},
error : function (xhr, textStatus, errorThrown) {
//other stuff
},
complete : function (){
$.unblockUI();
}
});