Forcing "Save As" dialog via jQuery GET

Question

I'm calling a jQuery "GET" on the test.php file code below.

I'm trying to get the script to pop a "Save As" dialog on the resulting test.ini file to allow it to be saved locally. However, although I can echo the result back to the jQuery fine, I can't seem to pop the "save as" dialog.

Update: Thanks to the solutions below, I just changed my $.get to a window.location.replace.

$('#test').click(
    function()
    {
        //$.get('<?php echo get_bloginfo('template_directory') ?>/test.php');
        window.location.replace("<?php echo get_bloginfo('template_directory') ?>/test.php");

    }
);

I believe an AJAX request can never show up the Save As dialog. Why not just navigate to that page instead of an AJAX request? — pimvdb
– pimvdb, Commented Jul 14, 2011 at 20:26

JJJ · Accepted Answer · 2017-02-12 19:43:51Z

8

You can't get an ajax request to show a "Save As" dialog, but what you CAN do is insert a hidden iframe element in the page, then set the source of that iframe to the url you want the user to download. Voila, there's your Save As.

Here's a copy and paste example:

$('a#linky').click(function(){
  var iframe = document.createElement("iframe"); 
  iframe.src = 'http://example.com/branding.zip'; 
  iframe.style.display = "none"; 
  document.body.appendChild(iframe);
  return false;
});

edited Feb 12, 2017 at 19:43

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

answered Jul 14, 2011 at 20:36

Jimmy Baker

3,2551 gold badge27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Scott B Over a year ago

+1 for copy/paste. I ended up just changing my $.get to a window.location.replace but I may do this later.

ncubica Over a year ago

not working for me, my pdf show on the iframe but the "save as" dialog never appear :(.. Just testing Using google chrome...

Jimmy Baker Over a year ago

@nahum Is the PDF being served with a Content-Disposition: attachment header? If not, Chrome will just render it instead of downloading the file.

ncubica Over a year ago

For me was easier to open a new blank window and put the content-disposition and resolve my problem...

RTF Over a year ago

I realise this is a year old now, but I've been successfully using this code (in the answer) when running the server locally, but when I run the server on a remote machine, the iframe never shows up. In fact, nothing at all happens: the server logs report the file retrieved successfully. But no save-as dialog appears. Could anyone suggest why this might happen?

Aleks G · Accepted Answer · 2011-07-14 20:37:41Z

3

You don't need an AJAX for this. Just navigate to the php in question and in that php use

header('Content-disposition: attachment;filename=whatever.dat');

This will pop-up the "save as" dialogue box and you'll remain on the original page.

answered Jul 14, 2011 at 20:37

Aleks G

57.5k34 gold badges180 silver badges280 bronze badges

4 Comments

Winfield Trail Over a year ago

Works unless the PHP in question errors out, in which case it WILL navigate to the new URL and print the error for the user. For this reason, I prefer to use a new frame (or, as Jimmy suggests, an iFrame.)

Aleks G Over a year ago

Well, naturally, if you get errors in the system, then the behaviour will not be the same as you expect. If you use iframe method suggested by Jimmy and your php errors out, from the user's point of view nothing will happen at all. That is, the user clicks the button/link/etc - and nothing happens - also not the best user experience.

Aleks G Over a year ago

Don't you just love the downvotes with no comments - five years after the answer!

Drew Over a year ago

Here's one to make up for it. Congrats on your pending android gold badge.

Winfield Trail · Accepted Answer · 2011-07-14 20:35:12Z

1

An AJAX request can't spawn the file download dialog. Consider instead opening your download target in a new window.

answered Jul 14, 2011 at 20:35

Winfield Trail

5,7032 gold badges31 silver badges45 bronze badges

Collectives™ on Stack Overflow

Forcing "Save As" dialog via jQuery GET

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related