Multiple blocks in jquery ui blocker?

Question

I am using this plugin.

However it seems to use global variables

$.blockUI();
$.unblockUI();

Is there away I can have different instances of this block.

 $(document).ajaxStart(function (e)
 {
          $.blockUI(); //setup with a loading msg.
  });

 $(document).ajaxStop(function (e)
        {       
            $.unblockUI();

        })


var ajax = // ajax setup stuff


// 1.5 way of doing it
ajax .success(function (response)
            {
               var valid = checkIfValid(response); // check if valid
               if(valid)
               {
                      $.blockUI(); // setup with a save message
               }

            });

So that's sort of what I have. I put

$.blockUI();

to keep it simple with no options but in my real code I have messages and other options set.

So now the problem is this once the success is finished the ajax stop gets called and unblocks everything. I only want the one that was started in the ajax start to be cleared not the one in the valid.

So I need different instances.

Answer 1

You can accomplish what you're trying to do by calling block on a div that you create on the fly, and then simply removing that div from the DOM. For example:

$(document).ajaxStart(function (e) {
    /* Create a <div> that will contain the blocking elements: */
    $("<div id='ajax-block' style='position:fixed;width:100%;height:100%' />")
        .appendTo("body").block()
});

$(document).ajaxStop(function (e) {
    /* Remove the page block specific to the ajax request: */       
    $("#ajax-block").remove();
});

And do something similar for the other event you're blocking (just change the id attribute inside the dynamically appended div and the call to remove().