blockUI is not working as expected

Question

I have a following jquery code

$("#tbl").block({ message: 'Updating...' });
    $("#tbl > tbody > tr").each(function (i) {
    ...
    }
$("#tbl).unblock();

Now my problem is blockUI only works after it come out of the loop. How can I blockUI before entering the loop and unblock UI after loop?

Answer 1

You will want to use the onBlock callback available in BlockUI.

Here is the code:

HTML:

<button id="btn">Click Me</button>

JavaScript:

$(document).ready(function() { 
    $('#btn').click(function() { 
        $.blockUI({ 
            fadeIn: 1000,
            message: 'Your message here...',
            onBlock: function() {
                var x = 0;
                for (var i = 0; i < 1000000000; i++) {
                    x = (x*x)*(x*x);
                    x = x*i;
                }
                $.unblockUI();
            } 
        }); 
    });    
});

Here is a working Fiddle