Button loading state Asp.net JavaScript

Question

I using bootstrap and i want to use that; http://getbootstrap.com/javascript/#buttons-stateful

<asp:Button ID="Button1" runat="server"  Text="Send It"  data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"  />

    <script>
       $('#Button1').on('click', function () {
        var $btn = $(this).button('loading')
        $btn.button('reset')
                       })
    </script>

But it doesn't work. what can i do to work this?

Answer 1

When an ASP.NET control is rendered, it's assigned a new ID. If you do an inspect element on your button, you'll notice it's ID is actually not Button1 . Because of this, your $('#Button1') selector is not finding anything.

If you're using a version of ASP.NET that supports it, you can put clientIDMode="static" on your button to keep the ID from changing.

If not, you can get the client ID by replacing $('#Button1') with $('#<%=Button1.ClientID%>')

Answer 2

1. Make sure jquery is loaded
2. Make sure boostrap css is loaded
3. Make sure bootstrap javascript is loaded

It looks like when your button is loaded it is immediately reset. Trying have the button load in the before step in an ajax request. Then put the rest in the complete step of the ajax step. This way you can see it working.