jQuery ajax beforeSend

Question

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();
            }
        });

Raster

Side note: any reason why async=false? – Fard

It's updating commonly used UI on the page. I don't want users to be able to use those actions while it's executing. – Raster

beforeSend doesn't make any sense in combination with async:false. If you want to keep async:false, you can just add the blockUI call before your ajax(...), since the code will be executed synchronously anyway. – Enmesh

I removed the beforeSend and put the blockUI before the request however the functionality hasn't changed. – Raster

What do you mean with "the functionality hasn't changed"? Are you saying the blockUI call is still being executed after the success handler? – Enmesh

It hasn't changed from how I described it above. It is called before the success handler. However it doesnt display the blockUI until it hits the success function. – Raster

Answer 1

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

Enmesh

Answer 2

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();
            }
     });

Chickaree

I agree with your reasoning... and I want to add that technically you don't even need the complete callback. You can just add $.unblockUI() after the ajax() section, since it is async anyway. – Enmesh

I removed the beforeSend and complete and put the logic before and after the .ajax request however the functionality hasn't changed – Raster

Answer 3

$.blockUI({
        fadeIn : 0,
        fadeOut : 0,
        showOverlay : false
});
setTimeout(function() {
     $.ajax({
            type : 'POST',
            url : url,
            async : false,
            data : postData,
            success : function (returnData) {
                //stuff
            },
            error : function (xhr, textStatus, errorThrown) {
                //other stuff
            }
     });
},100);
$.unblockUI();

http://bugs.jquery.com/ticket/7464

Launceston

Answer 4

Another approach could be overload $.ajax function

$.orig_ajax = $.ajax;

$.ajax = function() {
    var settings = {async: true};
    if (2 == arguments.length && 'string' == typeof arguments[0] && 'object' == typeof arguments[1])
        settings = arguments[1];
    else if (arguments.length && 'object' == typeof arguments[0])
        settings = arguments[0];

    if (!settings.async && 'function' == typeof settings.beforeSend) {
        var args = arguments;

        settings.beforeSend();
        var dfd = $.Deferred();
        setTimeout(function() {
            $.orig_ajax.apply($, args).then(dfd.resolve)
                                      .fail(dfd.reject);
        } ,100);
        return dfd.promise();
    } else
        return $.orig_ajax.apply($, arguments);
};

not perfect (because of different deferred object), but may be helpful..

Paracasein