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

Question

Hiya,

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";   
}
?>

Answer 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