Search code examples
c#javascriptasp.netascx

Disable buttons after click until post back of ascx control using javascript


The page works as expected, disables the buttons and shows my loading indicator but the OnClick event is never called. I am relatively inexperienced with Javascript and I cannot seem to find an answer as to why this doesn't work.

I expect that once the Disable() method occurs and returns true it will call the OnClick method, which will cause a post back and automatically re-enable the buttons.

Perhaps I am going at this all wrong, I appreciate your help.

<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<%@ Control Language="c#" Inherits="MyControl"
Codebehind="ThisControl.ascx.cs"%>

<div class="Form" style="width: 100%">

  <img id="imgLoading" src="images/GridImages/spinner.gif" style="display:none" alt="loading..." />

  <ol>
    <li>
        <asp:Button ID="FirstButton" CssClass="btn" runat="server" Text="First Press Me"
            OnClick="First_Click" OnClientClick="this.value='Please Wait...'; needToConfirm=false; return Disable(); "/>
        <span>
            <asp:Button ID="SecondButton" CssClass="btn" runat="server" Text="Second Press Me"
                OnClick="Second_Click" OnClientClick="this.value='Please Wait...'; needToConfirm=false; return Disable(); "/>
        </span> 
    </li>
  </ol>

  <script type="text/javascript">
    function Disable() {
        document.getElementById('<%=FirstButton.ClientID %>').disabled = true;
        document.getElementById('<%=SecondButton.ClientID %>').disabled = true;
        setTimeout('UpdateImg()', 0);
        return true;
    }
    function UpdateImg() {
        $('#imgLoading').show();
        var img = document.getElementById('imgLoading');
        img.src = 'images/GridImages/spinner.gif';
    }
  </script>

</div>

Solution

  • Found the answer here.

    Added the "UseSubmitBehavior = False", and voila, the OnClick event was properly called.

    Apparently asp immediately respects the disabling of the button and causes the event fire to fail.