jQuery ajax beforeSend
javascript, jquery, jquery-blockui
Solution
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 with `async:false`, which means JS stops everything until the request returns
- `ajax()` 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 of `success`, 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` and `complete` 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`
Problem
I have a simple AJAX call that is executing a function on the `beforeSend` and on `complete`. They execute fine but the `beforeSend` is "seemingly" not executed until after the success. On the `beforeSend` there is a "Please wait" notification. If I put a break after the function in the `beforeSend` then it will show that notification and then hit the success. Without the break point then it will sit there and think while waiting for the response and then my please wait notification will appear for a fraction of a second after the success is hit. The desired functionality is to have the notification appear as soon as the request is sent so it displays while it is waiting for the response. ``` $.ajax({ type : 'POST', url : url, async : false, data : postData, beforeSend : function (){ $.blockUI({ fadeIn : 0, fadeOut : 0, showOverlay : false }); }, success : function (returnData) { //stuff }, error : function (xhr, textStatus, errorThrown) { //other stuff }, complete : function (){ $.unblockUI(); } }); ```