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