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?

Answer 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...