JQuery BlockUI not unblock page

I have a very strange problem! I used the blockUI JQuery plugin on one of my pages and it worked fine. I did the same for another page and it doesn't unblock 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 doesn't work returns "false" when $ ("# commentBox"). hasClass ("modalPopup") is evaluated in the cancelComment function, and the page that works correctly returns true.

0


a source to share


1 answer


@Azam - There is nothing wrong with the code you linked above. There is no reason why this shouldn't work. I copied the code in the post directly and tested it on this jsbin page . See 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 the real cause of the problem is when you add the "commentBox" div inside the GridView ItemTemplate. This results in the same div with the same ID multiplied by the number of rows in your gridview. Generally, having the same ID in multiple HTML elements is bad, but that's what the gridview does.



Here is a workaround I tested and it works. Change two functions:

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

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

      

Here I am using a jQuery variable to hold a reference to the commentBox DIV and pass it to $ .blockUI so that the $ .unblockUI () function call will work correctly.

+2


a source







All Articles