CODEWITHSUNDEEP
javascriptjquerydjangofiledownload
domandinho
domandinho

Reputation: 1320

Jquery 1.11.1 - download file and additional callback

I have form which i submit to django server by calling.

$("#my_form").submit();

It server returns xml file by executing this code:

content = some_data_retrieved_from_database_as_xml()
response = HttpResponse(content, content_type='text/xml')
response['Content-Disposition'] = 'attachment; '
response['Content-Disposition'] += 'filename=my_file.xml'
response['Content-Encoding'] = 'UTF-8'
return response

Google Chrome only downloads this file, but i want register additional callback function, called myFunction(data).

Chrome should download this file and next call myFunction(this xml file).
I tried this code, but it doesn't work:

$("#my_form").bind('ajax:complete', myFunction);

I also tried to use $.post, but after that only callback function is called and unfortunatelly my file is NOT downloaded.

Upvotes: 7

Views: 2478

Answers (4)

O_Z
O_Z

Reputation: 1563

The easy way is that the submit result will be an html page with an iframe. Theiframe will perform the download and the parent html will perform what ever you like.

Upvotes: 0

Jacob Thomason
Jacob Thomason

Reputation: 3411

I believe the answer, at least according to this similar thread:

How to do a Jquery Callback after form submit?

would be to:

$("#myform").bind('ajax:complete', function() {
  // tasks to do 
});

See jQuery documentation for ajaxComplete

Upvotes: 0

alepeino
alepeino

Reputation: 9771

So you want to post asynchronously, download the returned file, and also execute a callback. One possibility is to "fake" a download link:

$.post(POST_URL, POST_DATA, function(response) {
  var a = document.createElement('a');
  a.setAttribute('href', 'data:'
    + response.contentType
    + ';charset='
    + response.inputEncoding
    + ','
    + new XMLSerializer().serializeToString(response));
  a.setAttribute('download', DOWNLOAD_FILENAME);
  a.click();
  // file download triggered

  myFunction();
  // additional callback action
});

Update

As Zoran Majstorovic mentioned in his comment, you can try this jQuery plugin: http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

Just include the source and then

$.fileDownload(POST_URL, {
  httpMethod: "POST",
  successCallback: myFunction
});

For security, you need a previously set cookie 

Set-Cookie: fileDownload=true; path=/

Upvotes: 1

Tistkle
Tistkle

Reputation: 500

$(form).submit() is not an ajax, but a form send (usually, POST), so, you can't register any event listener for 'submit response complete' AFAIK. I'm using the jquery-file-download-plugin, based on cookies to execute some javascript, as you need.

Upvotes: 0

Related Questions