Jquery plugin blockUI not working with ajax

Question

I want to block the current page when a specific ajax call is made and use a blockUI as a message box. I can't just use $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

My code is the following..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }
                    $.unblockUI();
                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });
    }
});

The scenario is that when I click the .submit button, the page is blocked and a ajax call is made to the server to get a data response. When the ajax call is successful, I unblock the current page and if data.status is 'OK', I show a message box (also based on blockUI plugin). Else I show an error on the current page, and then unblock it.

Edit at 2016, there is a edit which change the question meaning(maybe due to my very poor English at that moment), I have rolled change back here, and make it more clear, please do not change below again.

But in fact, only after ajax call is completed (debug step over the code in ajax complete handler), then see:

1. first $.blockUI(); excuted
2. execute $.blockUI({ message: 'OK' }) or not
3. then $.unblockUI() be called

(Above is what I mean abnormal execution sequence of chrome or firefox debug tool in the answer.because blockui code should not be executed after ajax complete)

It's not what I want, and I can't figure this out.

Answer 1

The problem was an execution sequence anomaly caused by browser's debug tools in both chrome and firefox. With the debugger, I confirmed whether $.blockUI() executed before the ajax call or not. It was always executing after I stepped over the complete handler in ajax. Just now, I set a breakpoint in server side code and I found that execution sequence becomes normal as I want it be!

update at 2016-01-25:

Note:

1. This answer is answered at 2012-09-26. I don't know whether chrome or firefox still has something abnormal execution sequence when doing a async call now.(But I remember, at that time, set a break point on the line - $.blockUI({ message: 'OK' }); in chrome debug tool, type F10(go next) , would see chrome just step over the break point, and nothing heppen)
2. Actually there is no error in the question's code. I think why I ask this question is only because I see the abnormal execution sequence in debug tool, which make me confuse, and the answer is here. If you want to find out why your code not work or something else , you'd better to find other answers or ask a new question.
3. About abnormal execution sequence, now, I think maybe it is by blockui too. Because we don't see how $.blockUI() worked, maybe block element function is stored deep inside the chrome execution callback stack. I may place the breakpoint at wrong line If that assumption is true(so maybe need set breakpoint in blockui source code)

And, I haven't work with blockui for many years.If you just want a block message box, I suggest sweetalert.

Answer 2

I had the same issue because i used sync ajax call that is aync is false

I solved it by making an ajax call async to true

$.ajaxSetup({ async :true});

Answer 3

Set the Block UI in the beforeSend function and the unBlockUI in the complete function so that you get the behavior you are expecting.

$.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            beforeSend : function() {
               $.blockUI({ message: 'OK' });
            }, 
            complete: function () {
                bc.find('.submit').removeClass('lock');
                 $.unblockUI();
            },
            success: function (data) {
                if (data.status == 'OK') {

                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }

                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });

This will make sure your Ui will block as soon as the request is sent and unblock as soon as its completed..

Answer 4

you can make your code much simpler with a wrapper around ajax such as ajaxBlockUI - see https://stackoverflow.com/a/28358070/460084

all you'll have to do is add blockUI:true to ajaxBlockUI and the actual blocking and unblocking the UI will be handled internally.