Descarga de archivos JQuery con Ajax

Question

Estoy usando el gran archivo de John CulvinerDescargar el complemento para producir un mensaje de "espere por favor" cuando mi usuario elige generar un informe.

Cuando un usuario hace clic en un enlace, le envío una solicitud ajax a mi PHP que genera un PDF en el servidor. En ese momento, estoy intentando actualizar el enlace en mi controlador de éxito para el complemento de descarga de archivos.

Es posible que me esté equivocando, pero este es mi código: cualquier ayuda es muy apreciada.

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

En este punto, cuando hago clic en el enlace, el modal se muestra correctamente con el mensaje "Esperar". Mi archivo se compila en el servidor (confirmado con mi alerta en mi controlador de éxito) y mi HREF se actualiza. Sin embargo, el complemento no solicita al usuario la descarga.

Gracias!

Answer 1

¿Has intentado ajustar el tiempo de espera?

$.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

Probablemente, lo que necesita para iniciar la descarga, después se recibirá la referencia de enlace:

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

Usted no necesita llamada AJAX funcion de JS. Su enlace <a href='yoursite.com/pdf.php' se identifica con este comando $(this).attr('href') ubicación de su servidor proceso de pdf.

EDIT:

Su llamada:

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

También uso jquery.filedownload para mi aplicación, espero que mi solución sería ayudar a otra persona que tiene el requisito similar conmigo; y cambio el uso solo un poco. es decir:

1. lo uso con rails3

2. Quiero mostrar tweeter Bootstrap modal en lugar de diálogo de jQuery.

A. el lado del cliente (front-ENT), a continuación es la función que el apoyo para descarga de archivos cuando el usuario haga clic en el elemento de archivo en la página HTML:

función DownloadFile (id, file_url , nombre_de_fichero, 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. lado del servidor (back-end), que crea una acción para enviar el archivo, esta acción es la paramenter "file_url" de la función JavaScript arriba:

descarga def

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

final

C. combinar servicios de fondo y la fuente de gama basada en el apartado (archivo) haga clic en evento:

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

estoy usando el siguiente código para descargar un archivo en la misma ventana (sin abrir una nueva pestaña). Funciona, a pesar de que no tiene ningún apoyo errores ...

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>