How To Use JQuery BlockUI In The Master Page To Load Please Wait Message..

I need to implement jquery blockUI for my application.. I have this code.. $.blockUI({ css: { border: 'none', padding: '15px', backgroundCol

Solution 1:

I do this way:

In the masterpage I have added the script reference and a reference to a custom script where I have the following code

//Set Defaults values for blockUI
$.blockUI.defaults.theme = true;
$.blockUI.defaults.title = 'Please wait...';
$.blockUI.defaults.message = '<img src="_assets/images/blockUI_Loader.gif" />';
$.blockUI.defaults.css = {};
$.blockUI.defaults.themedCSS = {};
$.blockUI.defaults.themedCSS.width = 100;
$.blockUI.defaults.themedCSS.height = 64;
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.overlayCSS.backgroundColor = '#ffffff';
$.blockUI.defaults.overlayCSS.opacity = 0.6; 

Then when I have to use it in ajax calls I simply use

$("#element").block();
$.ajax({
    type: "get",
    dataType: "html",
    url: "some/url",
    data: {},
    success: function (response, status, xml) {
        $("#element").unblock();
    },
    error: function (response) {
        $("#element").unblock();
    }
});

Solution 2:

To make it accessible everywhere without writing it over and over again, you can place the code in a function()

for example, place this in your global javascript file:

function blockUI(){
// $.blockUI({ css: {...
}

Then anywhere you need it, call blockUI();