Geek asks and answers

Loading a jQuery file using Ajax

I use the GreatDownload plugin from John Culviner to create a “Wait” message when my user wants to create a report.

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

I may approach this incorrectly, but here is 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 moment, when I click on the link, the modal is displayed correctly with the message "Please wait." My file is created on the server (confirmed with my warning in my success handler), and my HREF is updated. However, the plugin does not request user downloads.

Thank!

+5
5

, :

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

ajax funcion JS. <a href='yoursite.com/pdf.php' $(this).attr('href') pdf.

EDIT:

:

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

?

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

jquery.filedownload , , - , ; . :

  • rails3

  • -- jquery Dialog.

A. (front-ent), - , , HTML:

function DownloadFile (id, file_url, _, 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 the file, this action is the paragraph "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 the interface and the end of the font based on the click (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'%>");

});
0
source

I use the following code to upload a file in the same window (without opening a new tab). It works, although it does not have 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>
Run codeHide result
0
source

More articles:


All Articles