Asp.net /JQuery to show/hide animated gif before download

Question

I have created a page that shows an animation when it begins a server side operation. The div looks like this:

 <div id="loading" style="display: none;">
        <img id="loading-image" 
         src="../../Images/waiting-animation-extra.GIF" alt="Loading..." />
    </div>

My client script looks like this

   $(document).ready(function () {
        $("#btnExportToExcel").click(function () {               
            $('#loading').show();                
        });
    });

My Css looks like this:

 <style type="text/css">
    #loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 40%;
        left: 45%;
        z-index: 100;
    }
</style>

When I click my asp button, the animation starts and the report is prepared. The problem is that I would like to hide the animation when the report is downloaded. However, when the download is done, the .gif just freezes. I have tried ScriptManager.RegisterStartupScript(this, GetType(), "DoHide", "$("#loading").hide();", true); in the code behind at various points but it seems to be affected by this code:

 DateTime time = DateTime.Now;

    Response.Clear();
    Response.AddHeader("content-disposition" 
          ,string.Format("attachment;filename=Equipement Man Game Played {0}.xls"
         ,time.ToShortDateString()));
    Response.ContentType = "application/vnd.xls";
    System.IO.StringWriter writer = new System.IO.StringWriter();
    System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(writer);
    gdvData.RenderControl(html);    
    Response.Write(writer.ToString());
    Response.End();

Response.Write and Repsonse.End stop the .hide(). All I need to do is to show an animation that will be started once the button is clicked and stops once the server-side database work and xls download is done. I am willing to take a different approach.

Answer 1

From asp.net button this will not work as you expecting. You need to call your download using AJAX from regular HTML button and on AJAX success you can hide your div with image.