CODEWITHSUNDEEP
javascriptjqueryasp.nethttpfirefox
notAnonymousAnymore
notAnonymousAnymore

Reputation: 2687

window.location.href causing animated gif loader to freeze in Firefox

I have a link which when clicked redirects the user to the same page except with additional parameters:

<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});

On the server side I handle it by checking for "export" in the request path, and if it's found I write a PDF file to the response:

System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
response.AddHeader("Content-Disposition", String.Format("attachment; filename=" + filename + ".pdf; size={0}", buffer.Length.ToString()));
response.BinaryWrite(buffer);
response.End();

Everything works and the user can download the file, but any additional actions by the user that uses the loader.gif which is on the page shows an unanimated loader.

What could be causing this to happen? Is there any way to refresh/reload the page/javascript after the response is complete?

edit: I've found a useful JS tool here: http://fgnass.github.io/spin.js/ but I'd prefer not to use it unless absolutely necessary

edit2: I also tried using a generic handler (.ashx) to handle the request (ie. changing the href to point to the handler), but as soon as the page redirects and the file is written, same thing happens

edit3: The problem is only happening in Firefox so far. I've tried Chrome and IE and the gif stays animated in those browsers. (latest versions of each)

edit4: If I use an iframe with the src as the image it solves the issue, but it's very hacky and the style of it looks different across all browsers with regards to centering/padding/margins.

edit5: Yeah. If I inspect the frozen gif with firebug it magically unfreezes itself.

Upvotes: 16

Views: 8754

Answers (6)

Holger B&#246;hnke
Holger B&#246;hnke

Reputation: 1130

Instead of setting the window.location.href, you can use a form with method="get" and submit it. This form could either be coded into your HTML or created dynamically. See this Answer:

https://stackoverflow.com/a/21742326/1614903

Upvotes: 0

Oliver Clozoff
Oliver Clozoff

Reputation: 9

Here's my solution. It's faster and easier than any fix or workaround I've found. Just open the problem page in Chrome. Chrome has it's own problems, but this isn't one of them. Whenever I encounter a page full of gifs that causes Firefox to freeze, I just copy the URL, close the tab, open Chrome, and paste in the URL. I works every time! :o)

Upvotes: -2

David
David

Reputation: 1774

How about allowing the link to actually fire, but opening it in a new tab? That shouldn't interrupt anything about the gif, and is semantically fine, other than I guess it would leave a tab open. You could get rid of the content-disposition, and allow the browser /user to decide what to do with it though.

<a id="lnkExportToPDF" target="_blank">Export</a>

$('#lnkExportToPDF').click(function (e) {
    $(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});

Upvotes: 0

user1693593
user1693593

Reputation:

You could try an asynchronous approach on the click to allow the browser to parse the event queue after the click has initiated:

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();

    setTimout(function() {
        window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
    }, 20);
});

Upvotes: 0

pstenstrm
pstenstrm

Reputation: 6489

I managed to recreate the problem in firefox and I really can't find a way to "unfreeze" the gif. When I added a completely different file after a download and that too was frozen I gave up with that approach.

What I did instead was to test different ways to trigger the download. I found no window.location solutions that worked, what did work though was this:

window.open(path + 'users/export/' + parm1 + '/' + parm2);

window.open opens a new tab and downloads the file through that instead of the current tab as window.location does. It will return to the current tab as soon as the download starts.

Edit

You could also use a hidden iframe:

var iframe = document.getElementById('iframe');
iframe.src = path + 'users/export/' + parm1 + '/' + parm2;

Upvotes: 4

Aristos
Aristos

Reputation: 66641

I confirm that I have the same behavior with firefox, and the first that come to my mind is to use SetTimeOut but still the same behavior, so on firefox for some reason, this window.location.href is also call the "Stop" on browser, that this cause the gif animation to stop.

So what I found and you can solve your issue, that this is not happends on simple links.

And if you change your code you can archive the same effect with a link.

So change this 

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = "page.aspx";
});

to something like this 

$('#lnkExportToPDF').attr("href", "page.aspx");

and you have the same results, and gif will still moving.

Here is the fiddle test.
On the test I add to move to paypal, because is slow moving and you can see the animation stop or not, also pp not let show on iframe, so on example you stay on example and not load the page.

When you click on this example, the issue is appears only on firefox !

http://jsfiddle.net/hn7S9/4/

One other issue that I think is that if you need to make your parametres to the next page on click, you probably need to redesign that and fix them before your click.
This is possible because for sure is not depends on the last click on the dynamic create link. So make the link with their parametres before the click.

Upvotes: 1

Related Questions