JQuery téléchargement de fichier avec l'Ajax

Je suis l'aide de John Culviner du grand fileDownload plugin pour produire une "veuillez patienter" lorsque mon utilisateur choisit de générer un rapport.

Lorsqu'un utilisateur clique sur un lien, j'envoie une requête ajax à mon PHP qui génère un fichier PDF sur le serveur. À ce point, je suis tenté de mettre à jour le lien dans mon gestionnaire de succès pour la fileDownload plugin.

J'ai peut-être l'approche de ce mal, mais voici mon code, toute aide est grandement appréciée.

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

À ce point, lorsque je clique sur le lien modale s'affiche correctement avec le "Veuillez Patienter". Mon fichier ne se construit sur le serveur (Confirmé avec mon alerte dans mon gestionnaire de succès), et ma HREF est mis à jour. Cependant, le plugin n'invite pas l'utilisateur pour le téléchargement.

Merci!

Pourriez-vous ajouter un lien pour "John Culviner du grand fileDownload plugin"?

OriginalL'auteur Jason Wells | 2012-06-22

  1. 2

    Avez-vous pas besoin d'appel ajax fonction en JS. Votre lien <a href='yoursite.com/pdf.php' identifier avec cette commande $(this).attr('href') emplacement de votre serveur processus de pdf.

    EDIT:

    De votre appel:

    //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>
    Je suis le pdf généré dynamiquement à la volée, en passant params, d'où l'appel ajax.
    Passage de paramètres avec cette commande data: strData dans fileDownload calll
    - Je changer pour faire appel. L'un des <a href="**URL** pour générer des premier et deuxième appel pour télécharger vos données.
    Désolé pour la réponse tardive, je vais donner un coup de cette mais pas encore tout à fait sûr que j'ai suivi. Si ça marche, je serai de retour à assurez-vous que vous êtes upvoted 🙂 Merci pour votre aide!

    OriginalL'auteur Jones

  2. 2

    Probablement , vous avez besoin pour démarrer le téléchargement ,après le lien de la référence sera reçu:

     $("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;
});
    Ce genre de défaites le but du plugin, car il est censé donner à l'utilisateur des commentaires alors que le fichier est généré. Si je mets ce message sur le succès, le fichier sera déjà généré et l'utilisateur ne verra pas le message, mais pour une seconde.
    À moins que votre lien de référence n'est pas reçu, comment doit-votre "downloader" savoir ce qui est à télécharger??!!!! Si vous avez besoin d'attendre, jusqu'à ce serveur va répondre. Si vous voulez donner de la rétroaction à l'utilisateur, puis montrer votre 'progrès viewer' lors de l'appel ajax commence.
    Ingénieur, pas sûr que je le suis, avez-vous l'esprit de poster un exemple de la façon dont je voudrais afficher le message lors du début de l'appel?
    Voir ma mise à jour.

    OriginalL'auteur Engineer

  3. 0

    avez-vous tenté d'ajuster le délai de votre?

    $.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();
    John: Oui, je le savais, et il y a une option dans son plugin appelé checkInterval que j'ai aussi fait monter à 5000, mais pas de dés. Mon fichier prend environ 2 secondes pour générer.

    OriginalL'auteur John Macon

  4. 0

    J'ai aussi utiliser jquery.filedownload pour mon application, j'espère que ma solution serait de les aider quelqu'un d'autre qui a la même exigence avec moi; et j'ai modifier l'utilisation juste un peu. j'.e:

    1. Je l'utilise avec rails3

    2. Je veux afficher tweeter bootstrap modal au lieu de jquery Dialogue.

    A. Le côté client (front-ent), ci-dessous, la fonction de support pour le téléchargement de fichiers lorsque l'utilisateur clic sur le fichier de l'élément sur la page HTML:

    fonction DownloadFile(id, file_url, nom_fichier, 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. côté serveur (back-end), j'ai créé une action pour envoyer un fichier, cette action est la paramenter "file_url" de la fonction javascript ci-dessus:

    def télécharger

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

    fin

    C. combiner back-end et de police à la fin de l'fondée sur l'article(fichier), cliquez sur l'événement:

    $('#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'%>");

});

    OriginalL'auteur datnt