JQuery - Pass variables to PHP script via AJAX call and then display file

Question

I'm trying to generate Outlook event files for my events, doing so on the fly as and when someone requests it by pressing a link on the page.

Here's what i've got so far, but I can't find out how to get the browser to download the content which is returned.

I know how I could do this if I sent everything via _GET, but I'd prefer to do it via _POST, hence I'm going down this route..

Any thoughts? Thanks!

HTML / Javascript

<script>
$(function() {
    $(".button").click(function() {
        // validate and process form
        // first hide any error messages
        var start = $("input#start").val();
        var end = $("input#end").val();
        var dataString = 'start='+ start + '&end=' + end;
        $.ajax({
            type: "POST",
            url: "/calendar.php",
            data: dataString,
            success: function(data) {
                //Need to return the file contents somehow!
            }
        });
    return false;
    });
});
</script>
<form name="calendar" method="post" action="">
      <input type="hidden" name="start" id="start" value="<?php echo $start; ?>" />
      <input type="hidden" name="end" id="end" value="<?php echo $end; ?>" />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Outlook" />
    </fieldset>
</form>

PHP File

<?php
if (isset($_POST['start'])) {
    $start = $_POST['start'];
    $end = $_POST['end'];
    $c = header("Content-Type: text/Calendar");
    $c .= header("Content-Disposition: inline; filename=calendar.ics");
    $c .= "BEGIN:VCALENDAR\n";
    $c .= "VERSION:2.0\n";
    $c .= "PRODID:-//xxxyyyy//NONSGML //EN\n";
    $c .= "METHOD:REQUEST\n"; // requied by Outlook
    $c .= "BEGIN:VEVENT\n";
    $c .= "UID:". $start . $end ."-" . "-xxxxyyyy.com\n"; // required by Outlook
    $c .= "DTSTAMP:".date('Ymd').'T'.date('His')."\n"; // required by Outlook
    $c .= "DTSTART:20080413T000000\n"; 
    $c .= "SUMMARY:" . "\n";
    $c .= "DESCRIPTION:" .  "\n";
    $c .= "END:VEVENT\n";
    $c .= "END:VCALENDAR\n";
    echo $c;        
} else {
    echo "Sorry you can't access this page directly";   
}
?>

Asked: Mar 4 '10 at 15:44, are you still looking for the answer? — Ron van der Heijden
– Ron van der Heijden, Commented May 24, 2013 at 10:03

nickf · Accepted Answer · 2010-03-04 15:47:17Z

1

The output of the PHP file will be put into the "data" variable in your success callback.

Also, while we're here, you can also shortcut a few things. Instead of concatenating strings to generate the dataString (and hope that no one puts an = or & in there), you can use objects:

dataObj = { start : start, end : end };

And then you just pass that to the data property of .ajax

answered Mar 4, 2010 at 15:47

nickf

548k199 gold badges660 silver badges727 bronze badges

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

3 Comments

MrFidge Over a year ago

Hiya, thanks - but when i try and output the data variable, nothing happens - it's not recognising that it should be a new file for download. When I access calendar.php directly though the PHP headers kick in and the browser downloads the file.

nickf Over a year ago

@hfidgen Try setting dataType : 'html' and see what happens

MrFidge Over a year ago

No luck i'm afraid. I think it's something to do with the fact that you need to initiate a new HTTP request in order to download the file. Something which AJAX is designed to circumvent?

kuldeep.kamboj · Accepted Answer · 2013-01-07 09:22:44Z

0

As in ajax request i did not found any way to work redirection headers, So i used window.location code for download action url in the Ajax success callback. In your case except showing some progress, Their should not be need for send ajax request. So you can directly execute window.location = 'calendar.php?start=' + start + '&end=' + end;.

Alternatively if you are sure that only way you want it to execute through POST, Use direct Form Post instead of using Ajax.

answered Jan 7, 2013 at 9:22

kuldeep.kamboj

2,6163 gold badges29 silver badges65 bronze badges

Comments

Girish Sasidharan · Accepted Answer · 2013-02-22 09:34:26Z

0

Please check the following code hint. This may help you..

type: "POST",

data: ({"start" : <?php echo $start; ?> , "end" : <?php echo $end; ?>}) ,
success: function() {
                    //Do something
        }
});

answered Feb 22, 2013 at 9:34

Girish Sasidharan

6021 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

JQuery - Pass variables to PHP script via AJAX call and then display file

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related