I have a simple question (but the answer does not seem to be simple).

I have a synchronous AJAX call in my code and I want to call a function before this synchronous call.

The function I want to call is simply

$.blockUI();

from jQuery BlockUI Plugin.

I simply tried to put that line before my $.ajax call but the blockUI seems to be called after the synchronous call.

I then tried to use the beforeSend option of $.ajax, same problem as above.

Thanks in advance for any answer you could bring (except using asynchronous call which is just impossible in my case...)

Code is available here : /

I have a simple question (but the answer does not seem to be simple).

I have a synchronous AJAX call in my code and I want to call a function before this synchronous call.

The function I want to call is simply

$.blockUI();

from jQuery BlockUI Plugin.

I simply tried to put that line before my $.ajax call but the blockUI seems to be called after the synchronous call.

I then tried to use the beforeSend option of $.ajax, same problem as above.

Thanks in advance for any answer you could bring (except using asynchronous call which is just impossible in my case...)

Code is available here : http://jsfiddle/vWsus/2/

• javascript
• jquery
• ajax
• jquery-plugins
• blockui

Share Improve this question Follow edited Jul 24, 2012 at 14:26 user1374021 asked Jul 24, 2012 at 14:14 user1374021user1374021 19611 silver badge99 bronze badges 8

• 4 could you post your code here or make a jsFiddle please? – Carlo Moretti Commented Jul 24, 2012 at 14:16
• 1 Have you tried just using: $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); – mrkleinig Commented Jul 24, 2012 at 14:19
• If your are testing the code on your puter, the ajax call could be faster than the fadein. You could try to set the fadein to 0. – user1498339 Commented Jul 24, 2012 at 14:22
• By the way, synchronous ajax behavior including blocking user interaction tends to produce a terrible user interface experience. "As friendly as a cornered rat." Look into UI design patterns and books including "Don't make me think" to produce a much better experience for your users... – Larry K Commented Jul 24, 2012 at 14:23
• 1 @rsp In fact, I don't use blockUI to "block" the UI, I use it as a loading message. Actually, I am creating a design application in which user drags and drops items into a drop area and when an item is dropped, there is a heavy proccess that's why I would like to show a message saying it's in progress. I tried "blocking" the UI in the first line of the drop event of the droppable item but it does not work, the blockUI is shown after the call again ... – user1374021 Commented Jul 24, 2012 at 14:32

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

Synchronous calls are bad, they lock up the browser and if the call is not returned, it is not a good user experience. The problem you have is the synchronous call is locking up the browser so the DOM never has time to redraw. You need to give time for the DOM to update, so set a timeout before making the Ajax call.

$.blockUI({ message: '<p>foo</p>' });
window.setTimeout( ajxCallFnc, 100);

In your case, it's not that the blockUI is called after the synchronous call, it's just that the synchronous request prevents the display reflow (which generally happens "sometimes later" than your actual DOM manipulation). And as you said, when you tried & called blockUI before the call to ajax rather than from inside the beforeSend callback, you end up with pretty much the same result.

There is nothing that can be done in jQuery to prevent this behaviour since it is not a jQuery bug (nor a browser one per se, seeing as synchronous xhr requests are supposed to freeze the browser anyway and that nothing says the browser has to carry on with the reflow in that instance).

All I can remand is to NEVER EVER use synchronous requests. Asynchronous ones are easy enough to deal with.

You can take a look on Why You Should Use XMLHttpRequest Asynchronously

$.blockUI has a onBlock function. Try something like this:

$.blockUI({ 
    message: '<img id="processing" src="images/loading.gif" />', 
    onBlock: function() {
        // make your sync call here
        $.ajax({
            type: 'POST',
            cache: false,
            async: false,               
            url: blahblah,
            dataType: 'json'                
        }).done(function(data){
            //process response

        });
    }
}); 

this.notifyFixed=function(type,msg,callback){
        this.showNotification(type, msg);
            window.setTimeout(function(){
                if(typeof callback ==="function"){
                    callback();
                }
            },100);
    };

I had a notifyFixed function that I wanted to do before I make my ajax call, was running into same problems, so I added timeout and a callback function similar to epascarello that seemed to work fine for me.

So hopefully similar solution can help other people