How to stop animated GIF once report data is returned?

Question

I can't find the answer anywhere, and the particulars are driving me crazy. I've been tasked with updating an older application, using only JavaScript for client UI stuff. Reports used to be generated using PDF templates and manually looping through datasets and basically doing a form fill, then displaying the report. This has crashed the server many, many times.

I've since updated the app to use a report server, to help bring that report generation load offline. Every works fine, except that the animated GIF will not stop after the report returns. I use:

<span id="hiddenImg" style="display: none">
<img src="" id="animate" align="middle" alt="Loading"/>
</span>

Along with the following JavaScript:

function showDiv() 
  {
     document.getElementById('hiddenImg').style.display ="";  
     setTimeout('document.images["animate"].src="images/loading.gif"',100); 
  }

Which works beautifully. On the server side, I have something like this:

Response.AddHeader("Content-Type", "application/" + format);
Response.AddHeader("Content-Disposition", "attachment;filename=" + "report." + format);
data = report.GetBytes(reportpath, rbFormat.SelectedValue);    
Response.BinaryWrite(data);
Response.End();

Where data is the byte stream return by the report server.

The only thing that is not working is that the animated GIF will continue to play even after the report is delivered and the user clicks on the open/save/cancel dialog. I suspected it was the Response.End(); call, but even eliminating the line and letting the server to continue to run does not alleviate this problem. It seems that the page is NOT performing any postback after the report data is received, and the .html source is obviously showing the GIF. If I manually postback, I lose the open/save/cancel dialog, and the user has no opportunity to display the content.

I'm at a loss here and I've been at this a couple of hours, any help is appreciated.

possible duplicate of [Javascript:　how i can know when the IE file download prompt pop up?](http://stackoverflow.com/questions/2948529/javascripthow-i-can-know-when-the-ie-file-download-prompt-pop-up) — Piskvor left the building, Jun 01 '10 at 14:17
Check out the linked question - the functionality you're looking for is the same; plus there's an interesting workaround in one of the answers. — Piskvor left the building, Jun 01 '10 at 14:19
Okay, I read the above link. Interesting. I think the solution providing the nonce key to the session cookie would work. Does anyone have an example I could refer to and study? — G_F, Jun 01 '10 at 17:34
Does this answer your question? [How can I know when the IE file download prompt pop up?](https://stackoverflow.com/questions/2948529/how-can-i-know-when-the-ie-file-download-prompt-pop-up) — Brian Tompsett - 汤莱恩, Jan 26 '22 at 18:27

score 1 · Answer 1 · answered Jun 01 '10 at 21:42

I am assuming that you already entertained the idea of having another version of the same GIF that is not animating, and swapping it when you want the animation to stop?

it would take no time given the code you already have, just set the .src to non animated version. In this case, you also get the benefit of completed status etc..

also, if you are calling set timeout, it is better to pass a function reference instead of code as string. that way you don't need browser engines to evaluate code at runtime which is much slower and harder to debug, and get better development support..

ex: setTimeout(animateGif, 100);

function animateGif() { document.images["animate"].src="images/loading.gif" } function stopAnimating() { document.images["animate"].src="images/loaded.gif" }

score 0 · Answer 2 · answered Jul 05 '11 at 17:43

When using Response object on the server side, somehow IE cancel the postback. This is weird behavior.

Say you have GenerateReport.aspx that has btnSubmit control and btnSubmit_Click event handler. Inside the handler you have your code:

    //Some other codes
    Response.AddHeader("Content-Type", "application/" + format);
    Response.AddHeader("Content-Disposition", "attachment;filename=" + "report." + format);
    data = report.GetBytes(reportpath, rbFormat.SelectedValue);    
    Response.BinaryWrite(data);
    Response.End();

The solution is:

Separate the Response objects to another page, say Report.aspx. So your GenerateReport.aspx should not have any Response objects. All Response objects is in Report.aspx.

On the btnSubmit_Click event handler, call javascript code to open new window to Report.aspx, like this:

//Some other codes
ClientScript.RegisterStartupScript(this.GetType(), "javascript", "window.open('../Report.aspx')", true);

On your btnSubmit control you should have OnClientClick which call showDiv() to display the loading images.

By diverting the Response object to another page, the GenerateReport.aspx will retain its postback and when the page postback your loading images will go away.

How to stop animated GIF once report data is returned?

2 Answers2