ASP.NET Ajax - Using jQuery BlockUI in two places; can I unblock a specific div?

Question

I'm using the jQuery BlockUI Plugin (v2) because it rocks the casbah.

For every ASP.NET AJAX request made on the page, I use the InitializeRequest and EndRequest client-side events to block and unblock the UI, respectively -- this allows me to easily throw up a "Please wait..." dialog. Code is as follows:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
prm.add_initializeRequest(InitializeRequest);
var blockTimer;
var blockTimerFired;

function InitializeRequest(sender, args) {
    blockTimer = setTimeout(blockPage, 100);
    blockTimerFired = false;
}

function EndRequest(sender, args) {
    unblockPage();
}

function unblockPage() {
    // Check if the timer has run yet, and if it hasn't, cancel it
    if (blockTimerFired) {
        document.body.style.cursor = "default";
        $.unblockUI();
    }
    else {
        clearTimeout(blockTimer);
    }
}

function blockPage() {
    document.body.style.cursor = "wait";
    var loadingMessage = '<div style="padding-top:30px;min-height:75px;font-weight:bold;font-size:12pt;"><img align="absmiddle" src="../Images/ajax-loader.gif" /> Please wait...</div>';
    $.blockUI({ centerX: true, centerY: true, css: { backgroundColor: '#ebebeb', color: '#000' }, message: loadingMessage });
    blockTimerFired = true;
}

The above behavior works fine. However, in some cases I also use blockUI (on the same page) to create a yes/no modal dialog. This dialog is loaded when the document is ready.

The problem is that my $.unblockUI() call in unblockPage() seems to kill both dialogs. Is there a way I can easily target a specific div with $.unblockUI()? It'd be great if I could call $.unblockUI("#myYesNoDiv"), for example.

Answer 1

I was overcomplicating this problem.

When you use the command $.blockUI(), it first deletes any existing blockUI divs on the page. I had asked if I could target a specific div, but only one div exists on the page at a time, so my question was pointless. Sorry!

As a result, all I have to do is give the div I'm checking for an id and then check if it exists on the page. I was able to simplify the code and solve my problem:

New code:

function unblockPage() {
    // Check if the timer has run yet, and if it hasn't, cancel it
    if ($("#divBlockPage").length > 0) {
        document.body.style.cursor = "default";
        $.unblockUI();
    }
    else {
        clearTimeout(blockTimer);
    }
}

// Blocks page UI.
function blockPage() {
    document.body.style.cursor = "wait";
    var loadingMessage = '<div id="divBlockPage" style="padding-top:30px;min-height:75px;font-weight:bold;font-size:12pt;"><img align="absmiddle" src="../Images/ajax-loader.gif" /> Please wait...</div>';
    $.blockUI({ centerX: true, centerY: true, css: { backgroundColor: '#ebebeb', color: '#000' }, message: loadingMessage });
}