How to unblock a blocked page with jquery-blockui?

Question

I start to using jQuery BlockUI Plugin to block user activity for the page until complete a button process on C#/ASP.NET side.

So I wrote this;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.io/min/jquery.blockUI.min.js" ></script> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyButtonID').click(function () {
            $.blockUI({ message: '<h1>Please wait..</h1>' });
        });
    });
</script>

As you can see, this is a simple code that blocks UI when I click asp:button which ID is MyButtonID until it finish it's process. This works great.

Now I try to create some alert based on a condition while on this click process. If I understand clearly, now I need to unblock my page as a first, show the alert and keep it blocked again until complete button process.

That's why I wrote two function (maybe I can call these $.unblockUI and $.blockUI directly without them?) in my javascript side for that;

function UnblockUI() {
    $.unblockUI();
}
function BlockUI() {
    $.blockUI({ message: '<h1>Please wait..</h1>' });
}

As far as I search, most common way to call Javascript function on server side is using ClientScriptManager.RegisterStartupScript method in C#. So I tried to alert something on C# side as an example with;

if(condition)
{
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

and it worked. After that, I tried to unblock page with calling UnblockUI function in my javascript side but it didn't unblock it.

if(condition)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "unblock", "UnblockUI", true);
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

If I understand correctly, this UnblockUI parameter calls my UnblockUI javascript function which I defined above and this function calls $.unblockUI(); and unblock my page which is blocked but as expected, it didn't work.

What am I missing here? Or am I didn't even understand that This plugin lets you simulate synchronous behavior when using AJAX, without locking the browser sentence?

Solution 1

Try using the function call as follows:

function unblockUI() {
    $(function() {
        $.unblockUI();
    });
}


function blockUI() {
    $(function() {
        $.blockUI({ message: '<h1>Please wait..</h1>' });
    });    
}

I hope I have helped...

Solution 2

Here is what i am using in my current project.

  $(document).ready(function () {

      // unblock when ajax activity stops when DOM gets updated, means Ajax is completed
      $(document).ajaxStop($.unblockUI);

      //Block when trying for Ajax Activity
      $('ul#Appdropdown').click(function (ev) {

            $.blockUI(); 

       //Add ajax call to get data
      }   
 });

Implement the same and it will do the block and unblock for you.

Solution 3

I had an issue when using the $ajax complete function to stop the animation, If the ajax call fails i was resubmitting the ajax call, and wanted to block UI on resubmitting. But when making the call $.unblockUI inside of complete it was not animating correctly. It would flicker and disapear and not continue to block. However using global call to stop did work, allowing for blocking to re occur with a updated message on blocked UI.

$(document).ajaxStop($.unblockUI); // this works 

instead of inside of the complete function of ajax

$.ajax({
    complete: function(jqXHR, textStatus) {                    
                $.unblockUI();// this did not always work
            }
    });

Comments

[Lara]

@LaurentLequenne Pardon me !! I did not get what you meant ?

[Laurent Lequenne]

Don't worry... Joking :) If you use the AjaxStop default handler to stop the BlockUI, you could do it for the AjaxStart Handler... Certainly if you use the default BlockUI.