Jquery 1.11.1 - download file and additional callback

Question

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.

Maybe you can use something like this: http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/ — Zoran Majstorovic, Nov 01 '16 at 21:26
Not easy to do, see http://stackoverflow.com/questions/12020168/file-download-complete-callback — Seb D., Nov 02 '16 at 18:20
There's really no simple way to do this. I think the best solution would probably be to implement something on the serverside, like you'd do to get the download progress from the server, but where you'd instead poll the server until it tells you the file has been completely downloaded, and then execute a callback etc. — adeneo, Nov 06 '16 at 12:04

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

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

edited May 23 '17 at 11:55

Community

1
1

answered Nov 03 '16 at 13:58

alepeino

9,551
3
28
48

Sorry, i can't use download tag due to my application browsers compatibility – domandinho Nov 04 '16 at 12:45
@user3854236 see updated answer with cross-browser compatible solution (haven't tested it myself on IE though) – alepeino Nov 04 '16 at 13:42
can you please show me how to place the cookie? thanks – jurgen.s Jun 11 '19 at 09:39

score 0 · Answer 2 · answered Nov 03 '16 at 14:03

0

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

answered Nov 03 '16 at 14:03

Tistkle

500
6
13

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

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

edited May 23 '17 at 10:27

Community

1
1

answered Nov 07 '16 at 01:15

Jacob Thomason

3,062
2
17
21

score 0 · Answer 4 · answered Nov 07 '16 at 09:54

0

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.

answered Nov 07 '16 at 09:54

O_Z

1,515
9
11

Jquery 1.11.1 - download file and additional callback

4 Answers4

Update