Add a Loading Panel on Button Click

This sample code shows how to add a loading panel on button click. It is also useful when you want to block submit after one click.

<%@ Control %>

<table cellpadding="0" cellspacing="0" class="sqf-main-table" id="mainTable">
 <tr>
 <td class="sqf-header">
 <h1></h1>
 </td>
 </tr>
 <tr>
 <td>
 <div style="height: 200px;">
      <%= { DateTime.Now.ToString() } %>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <table class="sqf-footer-table" cellpadding="0" cellspacing="0">
 <tr>
 <td></td>
 <td class="sqf-footer-button-cell">
 <sq:SubmitButton runat="server" Text="Submit" CommandArgument="0"OnClientClicked="blockUIOnSubmit"  />
 </td>
 </tr>
</table>
</td>
</tr>
</table>
<sq:AjaxLoadingPanel runat="server" ID="LoadingPanel" />
<script type="text/javascript">
 var ncontainer = "<%= { @ncontainer.ClientID } %>";
 function blockUIOnSubmit(sender, args)
 {
 if (sender.validationResult === true)
 {
 var loadingPanel = $find(ncontainer + "_LoadingPanel");
 loadingPanel.show("mainTable");
 }
};
</script>