Block ui when Loading Page

Question

i want to block my ui until values in my drop down not loaded my js file code is as follows

$(document).ready(function() {
    // Load All Toll Plazas
    FillInCascadeDropdown({ userType: -1 }, "#ddlTollPlazas", "/Home/GetTollPlazas/" + -1);
}

function FillInCascadeDropdown(map, dropdown, action) {
    $(dropdown).empty();
    $.blockUI({ message: '<img src="/Content/images/ajax-loader.gif"/>' });
    $.post(action, map, function(data) {
        $.each(data, function() {
            $(dropdown).append("<option value=" + this.Value + ">" + this.Text + "</option>");
        });
    }, "json");
    $.unblockUI();
}

above code not working on page load.

Answer 1

I think you're problem is you are unblocking as soon as you call blockUI. You need to move the unblock call to a "Success" callback function. The concept of Callbacks are a little tricky. Basically this is the code that runs once the post is successful. I'm sure you've seen this page but refer to the jQuery post page to see where you need to put your callback and here to learn more about callbacks if you need to. Good luck!

Here is how it should look:

function FillInCascadeDropdown(map, dropdown, action) {
    $(dropdown).empty();
    $.blockUI({ message: '<img src="/Content/images/ajax-loader.gif"/>' });
    $.post(action, map, function(data) {
        $.each(data, function() {
            $(dropdown).append("<option value=" + this.Value + ">" + this.Text + "</option>");
        });

        $.unblockUI();
    }, "json");