Download indicator after pressing a button

Question

I want to show the loading indicator after the user clicks a button that executes several SQL queries. I tried to display the click of the div button, but this is not displayed until all the work behind the button is complete. I also tried this solution without success - http://forums.asp.net/t/1608046.aspx/1

Any suggestions?

code

 <asp:Button ID="loadButton" OnClientClick="ShowDiv()" runat="server" onclick="loadButton_Click" Text="Go" /> <script type="text/javascript"> function ShowDiv() {setTimeout('document.getElementById("updatediv").style.display = "inline";', 500);}} </script> <div ID="updatediv" runat="server" > <img src="Images/ajax-loader.gif" /> Updating .... </div> 

code

When using the solution above, the following error occurs:

** It seemed like a trick

code

 <script type="text/javascript" language="javascript"> function ShowDiv() $('#updatediv').show() } </script> 

code

Answer 1

You need the show div to be client side, not server side. ASP buttons have a convenient OnClientClick in addition to the Server side Click event.

This, of course, is the link you are showing. If you followed him, then he should not wait for the completion of the postback.

Answer 2

CSS

 <style type="text/css"> #UpdateProgress1 { top:450px; left: 450px; position: absolute; background-color: #C3E1FF; background-repeat: repeat-x; } </style> 

Add scriptManager, UpdatePanel as shown below:

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table runat="server" border="1" width="98%" align="center"> <tr><td></td></tr> </table> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <img src="Images/Loading.gif" /><br /><center><font color=red>Processing Data...</font></center> </ProgressTemplate> </asp:UpdateProgress> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnprocess" /> </Triggers> </asp:UpdatePanel> 

And then give some timer

 System.Threading.Thread.Sleep(3000); 

If you use Simple JQuery, you need to do an ajax way, and here is how you should do with ajax:

 $('#ShowDiv') .hide() // hide .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });