JQuery file download with Ajax

Question

I'm using John Culviner's great fileDownload plugin to produce a "please wait" message when my user chooses to generate a report.

When a user clicks a link, I send an ajax request to my PHP which generates a PDF on the server. At that point I am attempting to update the link in my success handler for the fileDownload plugin.

I may be approaching this wrong, but here's my code - any help is greatly appreciated.

$("body").on("click","##pdfLink", function(e){

    $.fileDownload($(this).attr('href'), {
        preparingMessageHtml: "Preparing your report, please wait...",
        failMessageHtml: "There was a problem generating your report, please try again."
    });

    // Build our data string.
    var strData = {method: "createPDF"};

    // Send a request to build our XL file.
    $.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        success: function(data) {
            alert(data);
            $("##pdfLink").attr("href","/pdf/"+data);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false; 
    e.preventDefault(); 
})

At this point, when I click the link the modal is displayed correctly with the "Please Wait" message. My file does get built on the server (Confirmed with my alert in my success handler), and my HREF does get updated. However, the plugin does not prompt the user for download.

Thanks!

Answer 1

I'm using the following code to download a file in same window (without opening new tab). It works, although it doesn't have any error support...

function downloadURL(url, callback) {

    var id = 'hiddenDownloader';
    $('body').append('<iframe id="' + id + '" style="display: block" src="' + url + '"></iframe>');

    var $iframe = $('#' + id);
    $iframe.on('load', function () {
        $iframe.remove();
        // no error support
        callback();
    });
}


downloadURL('http://example.com', function() {
  alert('Done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 2

I also use jquery.filedownload for my app, I hope my solution would help someone else who has the similar requirement with me; and I change the usage just a little bit. i.e:

1. I use it with rails3

2. I want to display tweeter bootstrap modal instead of jquery's Dialog.

A. The client side (front-ent), below is the function that support for download file when user click on the file item on HTML page:

function DownloadFile(id, file_url, file_name, strTime){

$.fileDownload(file_url, {
    successCallback: function (url) {
        $("#ilulModaldow").find('#file_name').html(file_name);
        $("#ilulModaldow").find('#file_created_at').html(strTime);
        $("#ilulModaldow").modal();
        //DATNT comment: $("#ilulModaldow") is a normal tweeter modal
    },
    failCallback: function (html, url) {

        alert('Connection error! Please try again');
    }
});

}

B. server side (back-end), I created an action to send file, this action is the paramenter "file_url" of the javascript function above:

def download

a=APostAttach.find(params[:id])
send_file a.file.path(:original), :type => a.file_content_type
#DATNT comment: below is the way I set cookies for jquery.filedownload plugin requirement
cookies[:fileDownload] = true
cookies[:Path] = "/"

end

C. combine back-end and font-end based on item(file) click event:

$('#attach_<%= attach.id %>').click(function(){
    DownloadFile("<%= attach.id %>","<%= download_courses_path(:id => attach.id) %>","<%=attach.file_file_name %>","Uploaded at <%=  time_ago_in_words(attach.created_at).gsub('about','') + ' ago'%>");

});

Answer 3

Probably , you need to start download ,after link's reference will be received:

 $("body").on("click","##pdfLink", function(e){
    // Build our data string.
    var strData = {method: "createPDF"};        

    var self = this;
    var $pdfGeneratingDialog = $('<div>',{
                   title:"Generating PDF",
                   text: "Please wait..."
                   }).dialog({modal:true});
    // Send a request to build our XL file.
    $.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        success: function(data) {
           $pdfGeneratingDialog.dialog('close');

           alert(data);
           $(self).attr("href","/pdf/"+data);
           //starting download process
           $.fileDownload($(self).attr('href'), {
               preparingMessageHtml: "Preparing your report, please wait...",
               failMessageHtml: "There was a problem generating your report, please try again."
           });             
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false;
});

Answer 4

You not need call ajax funcion in JS. Your link <a href='yoursite.com/pdf.php' identify with this command $(this).attr('href') location of you server process of pdf.

EDIT:

Your call:

// Build our data string.
var strData = {method: "createPDF"};

var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });

$.fileDownload($(this).attr('href'), {
    httpMethod: "GET",
    data: strData
    successCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        // In this case 
        $.fileDownload("/pdf/"+responseHtml, {
            preparingMessageHtml: "Download file",
            failMessageHtml: "Not work"
        });

    },
    failCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        $("#error-modal").dialog({ modal: true });
    }
});

HTML:

<div id="preparing-file-modal" title="Preparing report..." style="display: none;">
    We are preparing your report, please wait...

    <div class="ui-progressbar-value ui-corner-left ui-corner-right" style="width: 100%; height:22px; margin-top: 20px;"></div>
</div>

<div id="error-modal" title="Error" style="display: none;">
    There was a problem generating your report, please try again.
</div>

Answer 5

have you tried adjusting your timeout?

$.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        timeout: 10000,
        success: function(data) {
            alert(data);
            $("##pdfLink").attr("href","/pdf/"+data);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false; 
    e.preventDefault();