-1

I am trying to have a button that users can click to download a file, but the file may not exist because it is a zipped file of other files and has to be generated. I am checking this with AJAX but once I recieve a proper URL I'm not sure how to have the user download it.

window.open(link, '_blank'); tries to open the window to download the file, but most browsers prevent this and treat it as a pop-up. What is the best practice for having a user download a file like this? Thanks.

Here is the JS function I am using for reference:

function getDownloadedFiles() {
    var INTERVAL_TIME = 3000,
        $projectView  = $('#project-view'),
        id            = $projectView.data("project-id");
    $.ajax({
        type: "GET",
        url: AJAX_URL + id,
        success: function(data) {
            if (data.success) {
                var link =  data.profiler.link;
                window.open(link, '_blank');
            } else {
                setTimeout(getDownloadedFiles, INTERVAL_TIME);
            } 
        }
    }); 
}
Billy Jacobson
  • 1,608
  • 2
  • 13
  • 21
  • Get rid of the Window.open. If the file can't be handled by the browser automtically, it will open the SaveAs dialog by itself. Unless the user has a preference set already, in which case, it will just download the file to their drive, and notify them when it's done. – durbnpoisn Jun 18 '14 at 14:39
  • 3
    possible duplicate of [Download File Using Javascript/jQuery](http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery) – admdrew Jun 18 '14 at 14:41
  • I looked into that question and the solution wasn't working for me. – Billy Jacobson Jun 18 '14 at 14:52
  • I discovered I wasn't calling the correct URL, so the code did work. I'm gonna delete this question though because it is a duplicate. – Billy Jacobson Jun 18 '14 at 15:05

2 Answers2

-1

In the end, the correct solution was Download File Using Javascript/jQuery and I was using the wrong URL.

I was setting the link to be data.profiler.link when really it was data.data.link and confused myself.

Here is my final code:

function getDownloadedFiles() {
    var INTERVAL_TIME = 3000,
        $projectView  = $('#project-view'),
        id            = $projectView.data("project-id");
    $.ajax({
        type: "GET",
        url: AJAX_URL + id,
        success: function(data) {
            if (data.success) {
                var link =  data.data.link,
                    hiddenIFrameID = 'hiddenDownloader',
                    iframe = document.getElementById(hiddenIFrameID);
                if (iframe === null) {
                    iframe = document.createElement('iframe');
                    iframe.id = hiddenIFrameID;
                    iframe.style.display = 'none';
                    document.body.appendChild(iframe);
                }
                iframe.src = link;
            } else {
                setTimeout(getDownloadedFiles, INTERVAL_TIME);
            } 
        }
    }); 
}
Community
  • 1
  • 1
Billy Jacobson
  • 1,608
  • 2
  • 13
  • 21
-2

Maybe you can use a hidden iframe for that matter. Try this:

var downloadURL = function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
    iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

Just a shameless rip of Download File Using Javascript/jQuery

Community
  • 1
  • 1
Alexander Kludt
  • 854
  • 6
  • 17