Javascript blocked during file download - javascript

After a week of programming a website with users control for file download, I finally uploaded it to my web hosting just to find a problem with javascript.
With JQuery I set a click event with "on" function.
$("#ContenedorPV").on("click", "img", function () {});
This way, everytime I click a programatically appended image it opens a modal with a "download" hyperlink that when clicked, downloads a file.
<a id="BotonDescargar" href="" class="modal-action modal-close waves-effect waves-light btn-flat white-text" download>Descargar</a>
href is empty because I change it with JQuery this way.
$("#BotonDescargar").attr("href", "descargar.php?ID=" + ID_Actual);
This code changes the URL, appendind the correct ID, this is when problem happens. When I click the download link, file starts downloading as would but! javascript stops responding, if I click another image my modal doesn't show up, if I reload the webpage even the "Document.Ready" script will not work, same problem. Everything goes back to normal when download completes, I tried with a hidden iframe and same problem, is there a correct way to download files without blocking my javascript code? Thanks in advance.

My site uses POST to retrieve data from PHP scripts, those scripts use the PHP sessions. My download script verifies with session if the user has rights to access the file, after you use the "session_start()" it will block access to session until script finishes, in this case, until download finishes. That's why when downloading big files, Javascript wasn't able to retrieve data, thus causing a block, to fix this I used the next code just before the "Readfile" code.
session_write_close();
This way, I manually close the session, freeing it and letting other scripts access the session data, thanks for your time mates!.

Related

How do I execute some javascript after a file is downloaded?

I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:
$('#TerritoriesToExcelLink').click(function() {
$('#TerritoriesToExcelLoading').show();
window.location.href = $(this).attr('href');
});
I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.
I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.
How can I hide the loading message once the file has been completely downloaded?
Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.
If you aren't opposed to using flash...
You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.
This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.
I don't think tracking the progress can be done with server side languages either.

Standard way of doing a "thanks_for_downloading.html" + "Save file..." after a link?

Let's look at FireFox.
They have a nice big Call To Action button: "Firefox 3.6 - Free Download"
You click that, it links you to a new page: "Thanks for downloading Firefox! Your download should begin in a few seconds."
Then a few seconds later up pops: "FIREFOX.exe - Do you want to save or discard this file?"
This is pretty standard download behavior for applications accross the web. How is it done, in the simplest way?
There are two parts to this:
Forcing the browser to download the file, rather than trying to display it (with .exe that's no problem, but you might want to do it with an image, movie, or HTML file too).
Prompting the browser to download the file.
Let's pretend we just want the browser to download a file, without wanting to change the page. We can create a link like this, and it'll work as expected:
Download File
Your browser probably doesn't know how to handle a zip file, so it downloads "download.zip" straight to a file named after the filename in the URL. If you wanted to download a JPG instead, though, this wouldn't work:
Save this Sunset!
Your browser knows how to display a JPEG, so it redirects the page and shows the JPEG. Now we need to tell the browser not to show it, but to download it instead. To do that, we have to send it some specific HTTP headers in the response from the server.
Apache can handle this by specifying headers in .htaccess, but I'll stay away from a particular technology, opting to just talk about the mechanism.
So we send the following header to the browser along with the image:
Content-disposition: attachment; filename=the_sunset_of_a_lifetime.jpg;
The first header, content-disposition, tells your browser that we want the file to be an attachment, or in other words, it should be saved, not displayed. The filename attribute tells it the name to use to save the file (rather than "sunset.jpg", the file will be named "the_sunset_of_a_lifetime.jpg").
Now the link to download the "sunset.jpg" file works like we want. But how do we get the browser to download it without the user clicking on the link so we can show a "Thank You" page and prompt the download to start? A simple <meta> tag can do the trick, telling the browser to redirect the page after a set period of time:
<meta http-equiv="refresh" content="2;url=/images/sunset.jpg">
When your "thank you" page loads with that meta tag in the head, it'll wait for 2 seconds and then try to load the image. It'll get the headers we set in the last step, and download it instead of displaying it, and the user will stay put on the page like we want.
Example content of thanks_for_downloading.html:
<strong>Thanks for downloading XY</strong>
<script type="text/javascript">
window.onload = function(){
window.location.href = "path/to/XY.exe";
};
</script>
The Download-link is just a link to the thanks_for_downloading.html page
The call to action button is a regular link to the "Thank you" page. Then on the "Thank you" page, use javascript to redirect the user to the file you are downloading by setting the "window.location" property to the file's URL.

How does a javascript download link work?

I've been using the Microsoft Technet site and you can download the ISO files by clicking a link on the page. The element is like this:
<a href="javascript:void(0)" onmouseout="HideToolTip()"
onmouseover="ShowToolTip(event,'Click here to download.')"
onclick="javascript:RunDownload('39010^313^164',event)"
class="detailsLink">Download</a>
I wasn't able to find the RunDownload() method in the scripts. And I wondered what it is likely to do. I mean usually when I provide a link for someone to download I provide an anchor to it:
download
But this is working differently what is the script doing? Because even when I ran 'Fiddler' I wasn't able to see the actual download location.
there's no such thing as a "javascript download" link. Javascript can open a new window, or simulate a click on a link.
What you have to find is which url the function triggered by this click will lead to.
here's an example of how to do it:
Suppose we have a:
<a id="download">download Here ยงยงยง</a>
then this jQuery code:
$('#download').click( function() {
window.location.href = 'http://example.org/download/ISO.ISO';
} );
will redirect to the URL http://example.org/download/ISO.ISO. Whether this url starts a download or not depends on HTTP headers and your browser, not on what javascript do.
Download location can be a url-rewritten path. This mean that maybe some parameters are given with HTTP Post and some HTTP handler in the Web server or web application may be getting some arguments from the HTTP request and write file bytes to an HTTP response, which absolutely hides where the file is located in the actual server's file system.
Maybe this is what's behind the scenes and prevents you to know the file location.
For example, we can have this:
http://mypage.com/downloads/1223893893
And you requested an executable like "whatever.exe" for downloading it to your hard disk. Where's the "http:/mypage.com/downloads/whatever.exe"? Actually, it doesn't exist. It's a byte array saved in a long database in some record, and "mypage" web application handles a request for a file that's identified as "1223893893" which can be a combination of an identifier, date time or whichever argument.
What I think the function RunDownload might do is that it might inform the server using get request to the server that another download is about to happen , or it might need to run the download background by setting the target attribute to an iframe so the user won't need to open another tab and download the file on the same page.
Download
JS
var runDownload=function(){
e.preventDefault();
increaseDownloadCountOnTheServer(location);
window.location.href="filelocation.exe";
}

Javascript or jQuery: Download and redirect

Currently some guys programmed this in a HTML page:
<script>
location='http://example.com/downloadable.zip';
</script>
They want to redirect the user to another page once the file has started downloading. I can only modify this page but not the destination page.
What would be a good and clean javascript solution for making a user download the file and once he had accepted (or rejected) it, redirect him to another location? The solution may be jQuery code
NOTE: The downloading and redirection must be done automatically when accessing the page
Perhaps setup a link that calls a function. The function would in turn then send the download link, and then redirect.
This is just a guess based upon your description, as I don't know the full general setup, but it's what I would do going on what I know.
This seems like a hack. Have you tried an HTML meta tag with refresh? Also, you can add a link if the download fails.

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories