jQuery Plugin for Requesting Ajax-like File Downloads

why not append a hidden iframe and submit the iframe? that way, if the download fails, the user will not be sent away?

sorry, forgot to subscribe…

why would you want to clean up? it’s not likely to cause a lot of issues if you just create it as a child of BODY… use an unlikely ID (#filamentgroupajaxdownload, for instance), re-use if exists, and don’t bother cleaning up…

trapping errors would be nice, but that level of hackery is way out of my league

Using a single iframe could cause problems.
Maybe a connection pooler must be used in this case, with timeout per connection (a connection is actually a iframe element with random generated id)

You can handle it with some server side code and include a header in the HTTP response so that you can be sure the request was successful.

I’ve done a similar thing (http://www.samaxes.com/2008/10/23/stripes-and-jquery-ajax-forms-and-http-session-validation/) to check if a HTTP session has expired.

It will be very easy to implement a server side code, but as i get the idea of the plugin the priority is the client side.

Also implementing a server side code, will make the plugin hard to use (deploy), so it will be best if all the things are done in the jq code

yeah, server-side code is a bad idea… if you need it to work properly to detect errors, you’re screwed =)

a bad solution is no better than no solution

I agree. It sure is a bad solution for a jQuery plugin.

Another idea to improve the iFrame approach might be to use Cross-document messaging http://dev.w3.org/html5/spec/Overview.html#crossDocumentMessages.
This is something already implemented by some of the major browsers (Opera, FF3, IE8).

This way you can clean up the iFrame as soon as it responds to the source document.
Might it work?

Is there any event that is triggered when the response of a file download occurs?  Suppose you need to enable a ‘submit’ button or change the state of an element when the File Download dialog appears, how would you do this?  I’ve tried your File download function, but I don’t see any way to do this.

Just wanted to thank you. I spent way too much time trying to get around this only to see the data come back in the response instead of a download. Exactly what I needed.

You can find download and installation instructions at RA Project, along with some screenshots. It is very easy to install and set up WP Ajax Edit Comments on your blog. So, give it a try and let me know what you think of it. I find it extremely handy and valuable.

The problem here: there is no way to tell when file is ready to be saved. I was looking for download file solution with a callback function to run when the request is successfully processed. With this plugin, it’s impossible. Instead I use location.href=fileURL and fileURL sends PHP headers to make sure browser prompts to save file. That’s it!

Great post! Thanks for the source code!

I´ve already subscribed the feeds.

Just wanted to thank you. I spent way too much time trying to get around this only to see the data come back in the response instead of a download. Exactly what I needed

I also tried it but couldn’t use successfully with the above loops holes. Hope to see it again after needful corrections.

Maybe I am missing something but this dosen’t work for me, It just takes me to the destination page showing the image instead of prompting with a download dialog?

http://code.msdn.microsoft.com/AjaxFileDownload

Hope this helps

You are a genious!! thanks you very mutch!!

Now I can catch callback from server when download file. Code in here:

$.download = function(url, data, method, callback){
var inputs = ‘’;
var iframeX;
var downloadInterval;
if(url && data){
// remove old iframe if has
if($("#iframeX")) $("#iframeX").remove();
// creater new iframe
iframeX= $(’<iframe src="[removed]false;" name="iframeX" id="iframeX"></iframe>’).appendTo(’body’).hide();
if($.browser.msie){
downloadInterval = setInterval(function(){
// if loading then readyState is “loading” else readyState is “interactive”
if(iframeX&& iframeX[0].readyState !=="loading"){
callback();
clearInterval(downloadInterval);
}
}, 23);
} else {
iframeX.load(function(){
callback();
});
}

//split params into form inputs
$.each(data, function(p, val){
inputs+=’<input type="hidden" name=“‘+ p +’” value=“‘+ val +’” />’;
});

//create form to send request
$(’<form action=“‘+ url +’” method=“‘+ (method||’post’) + ‘“ target="iframeX">’+inputs+’</form>’).appendTo(’body’).submit().remove();
};
};

Note :
- If server return Content-Disposition header is inline, not attachment then both IE and Firefox can catch onload event else only Firefox can --> if header is attachment I will catch onload event by setInterval + readyState of iframe
- Data param is passed is object (ex : {property : value, ...}), not string (Because I want it )
- You can pass params to callback if like but you need fake it more
- I tested it in IE 7, IE 8 and Firefox 3.5

Enjoy it !!!

I review my post and see src="j@v@script:false;" is changed to src="[removed]false;". It is important to $.download can catch callback (I don’t know why).

wow guys you are great.
I’ve used it with php word class and it is working great !

Nice! Just what I was looking for. Works out of the box as advertised.

thank you
i like this!!