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?

Are you blocking the entire page? Also, are you able to send an ajax request back to the server in lieu of using the default asp button functionality? This will make what you're trying to do very easy because of the callbacks. — Mark C., Dec 22 '15 at 14:48
@MarkC. Yes. On documentation it says: _Usage is very simple; to block user activity for the page `$.blockUI();`_. [Element blocking](http://jquery.malsup.com/block/#element) is different as far as I see. _are you able to send an ajax request_ How can I do that exactly? You mean in `if` statement? — Soner Gönül, Dec 22 '15 at 14:52
Is your asp:button running a serverside event handler? Try a regular button. — Bindrid, Dec 22 '15 at 14:53
@Bindrid Yes. It's running on server side and it _has to_ because I do server side functionality on it's `Click` event handler. — Soner Gönül, Dec 22 '15 at 14:55
I don't understand your last sentence. Is ajax an option here? It would fit your needs perfectly. — Mark C., Dec 22 '15 at 15:09
_Is ajax an option here?_ As I said, I couldn't _even_ give a right answer for that since I'm newbie about those. Is ajax _can_ be as a solution? Since you said _fit your needs perfectly_, put it as an answer so I can try it. — Soner Gönül, Dec 22 '15 at 15:15
What does your button cause to happen in the sense that what is the expected result? Get data? show a different panel? — Bindrid, Dec 22 '15 at 16:03

score 7 · Answer 1 · edited Jan 23 '17 at 14:07

7

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

edited Jan 23 '17 at 14:07

Icarus

1,627
7
18
32

answered Jan 23 '17 at 13:24

Fabiano Souza

930
7
5

score 2 · Answer 2 · answered Jan 23 '17 at 14:14

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.

answered Jan 23 '17 at 14:14

Lara

2,821
7
39
72

you could you the ajaxStart to blockui too ? no ? – Laurent Lequenne Jan 23 '17 at 14:45
@LaurentLequenne Pardon me !! I did not get what you meant ? – Lara Jan 23 '17 at 15:08
1

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. – Laurent Lequenne Jan 23 '17 at 15:11

score 1 · Answer 3 · answered May 29 '18 at 19:04

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
            }
    });

score 0 · Answer 4 · answered Dec 14 '20 at 15:27

0

If you block user interface on this way :

BlockUI.Component(".page-content");

Then this is a working solution:

BlockUI.UnblockComponent(".page-content");

answered Dec 14 '20 at 15:27

Milos Gak

21
1
4

How to unblock a blocked page with jquery-blockui?

4 Answers4