BlockUI jQuery on Button click

Question

ANSWER: The fix for this problem is this :

Change selector from $('#Button3') to $('#<%= Button3.ClientID %>')

Thanks to Yuri.

ISSUE:

I am trying to get a button click to run the JQuery BlockUI plugin. I am having some issues this is my first shot at JQuery. I do have the Hello World pop-up example working so I think I am close but could use some help getting the rest worked out.

Here is the code...

<script src="../../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../scripts/jquery.blockUI.js" type="text/javascript"></script>

<script type="text/javascript">
 $(document).ready(function() {
     $("#Button3").click(function() {
     $.blockUI();

     setTimeout(function() {
         $.unblockUI({
             onUnblock: function() { alert('onUnblock'); }
         });
     }, 2000);
   });
});

</script>

I am trying to run this on an aspx page. As stated the Hello World popup works but not the blockUI.

Any help would be appreciated.

Here is the button aspx...

 <td>
      <asp:Button ID="Button3" runat="server" Text="Button" />
  </td>

no code behind events on the button.

This apsx page has a Master Page as well.

Some tweaks to the code have prodcued this error when closing the page in Visual Studio...

Microsoft JScript runtime error: Sys.ArgumentTypeException: Object of type 'Sys._Application' cannot be converted to type 'Sys._Application'. Parameter name: instance

Answer 1

First you have to block the UI. then only will it be unblocked. You cannot unblocked something that is not blocked as unblocked == not blocked.

So uncomment the first line inside the button click event of your code.

Demo: http://jsfiddle.net/naveen/D9GCj/1/

Please note that asp:Button will be rendered as input type="submit"

Answer 2

check out http://jsfiddle.net/frictionless/F53gd/

It works with the

• JQuery 1.6.4
• BlockUI v 2.3

Answer 3

You can try this way

$(document).ready(
    function() {
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onRequestStart)
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd)
    }
);

function onRequestStart() {
    $.blockUI();
}

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

Button OnClick:

Protected Sub OnClick(sender As Object, e As EventArgs)
    Thread.Sleep(5000)
    Button1.Text = "Done"
End Sub