JQuery BlockUI not Unblocking the Page

Question

I am having a really weird problem! I used the blockUI JQuery plugin in one of my pages and it worked fine. I did the same for another page and it is not unblocking the page when $unblockUI is called.

Here is the code:

function showCommentBox() 
{      

    $("#commentBox").addClass("modalPopup");   

    alert($("#commentBox").hasClass("modalPopup")); 

    $.blockUI( { message: $("#commentBox") } );     
}

function cancelComment() 
{    
    alert($("#commentBox").hasClass("modalPopup")); 

    $.unblockUI();   
}

The page that does not work returns "false" when the $("#commentBox").hasClass("modalPopup") is evaluated in the cancelComment function while the page that works correctly returns true.

Answer 1

@Azam - There's nothing wrong with the code you posted above. There's no reason why it shouldn't work. I copied the code in the post directly and tested in this jsbin page. See it for yourself.

To keep it as simple as possible this is all I used for the HTML body.

  <input type="button" value="Show Comment" onclick="showCommentBox()" /> 
  <div id="commentBox" style="display:none"><br/>  
    This is the text from the CommentBox Div<br/> 
    <input type="button" value="Cancel" onclick="cancelComment()" /> 
  </div>

EDIT: After reading some of your other posts, I realized that real reason for the problem is that your are adding the "commentBox" div inside a GridView's ItemTemplate. This causes the creation of the same div with the same ID multiplied by the number of rows in your gridview. Normally, having the same id in multiple HTML elements is bad, but this is what the gridview does.

Here's a workaround that I tested and it works. Change your two functions to this:

function showCommentBox() {
    $.currentBox = $("#commentBox");
    $.currentBox.addClass("modalPopup");   
    alert($.currentBox.hasClass("modalPopup")); 
    $.blockUI( { message: $.currentBox } );     
}

function cancelComment() {    
    alert($.currentBox.hasClass("modalPopup")); 
    $.unblockUI();   
}

Here I'm using a jQuery variable to store a reference to the commentBox DIV and passing that to $.blockUI, in that way the call to $.unblockUI() will work correctly.

Answer 2

thanks! helped a lot!