Tải xuống tệp JQuery với Ajax

Question

Tôi đang sử dụng plugin tuyệt vời của John CulvinTải xuống để tạo thông báo "vui lòng đợi" khi người dùng của tôi chọn tạo báo cáo.

Khi người dùng nhấp vào liên kết, tôi gửi yêu cầu ajax tới PHP của tôi tạo tệp PDF trên máy chủ. Tại thời điểm đó tôi đang cố gắng cập nhật liên kết trong trình xử lý thành công của tôi cho plugin tệpDownload.

Tôi có thể tiếp cận điều này sai, nhưng đây là mã của tôi - mọi trợ giúp đều được đánh giá cao.

$("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(); 
}) 

Tại thời điểm này, khi tôi nhấp vào liên kết, phương thức được hiển thị chính xác với thông báo "Vui lòng đợi". Tệp của tôi không được xây dựng trên máy chủ (Đã xác nhận với cảnh báo của tôi trong trình xử lý thành công của tôi) và HREF của tôi không được cập nhật. Tuy nhiên, plugin không nhắc người dùng tải xuống.

Cảm ơn!

Answer 1

bạn đã thử điều chỉnh thời gian chờ chưa?

$.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(); 

Answer 2

Có lẽ, bạn cần để bắt đầu tải về, sau khi tham khảo liên kết sẽ nhận được:

$("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 3

Bạn không cần funcion gọi ajax trong JS. Liên kết của bạn <a href='yoursite.com/pdf.php' xác định bằng lệnh này $(this).attr('href') vị trí của quy trình máy chủ của bạn về pdf.

EDIT:

Cuộc gọi của bạn:

// 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 4

tôi cũng sử dụng jquery.filedownload cho ứng dụng của tôi, tôi hy vọng giải pháp của tôi sẽ giúp ai đó có yêu cầu tương tự với tôi; và tôi thay đổi cách sử dụng một chút. tức là:

1. Tôi sử dụng nó với rails3

2. Tôi muốn hiển thị tweeter bootstrap phương thức thay vì Dialog jquery của.

A. Phía client (front-ent), dưới đây là các chức năng hỗ trợ cho tập tin tải về khi người dùng nhấp chuột vào mục tập tin trên trang HTML:

chức năng 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. phía máy chủ (back-end), tôi tạo ra một hành động để gửi tập tin, hành động này là paramenter "FILE_URL" của hàm javascript trên:

def tải

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] = "/" 

cuối

C. kết hợp back-end và font-end dựa trên mục (tệp) nhấp vào sự kiện:

$('#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 5

Tôi đang sử dụng như sau mã để tải xuống tệp trong cùng một cửa sổ (không cần mở tab mới). Nó hoạt động, mặc dù nó không có bất kỳ hỗ trợ lỗi ...

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>