php array to external page using jquery

Question

I have a php page to creates a multi-dimentional array called $results .

I would like to:

1. catch submit of a form button
2. override default behavior of the submit using jQuery
3. copy and process $results on separate php using $.post

I have this which is not currently working and am not sure why?:

<form id='download_to_excel' method="post">
    <input type="image" name="submit" value="submit" id='xls_download_button' src='images/common/buttons/download.png'> 
</form>

<?php 
    $json_results = json_encode($results);
?>

<script type='text/javascript'>
    $(document).ready(function(){ 
        alert($json_results);
        $("#xls_download_button").click(function(e){ 
            alert('clicked');
            e.preventDefault(); 
            download_xls(); 
        }); 

        function download_xls(){
            $.post('./libs/common/export_data_to_excel.php', {json_data : json_results};
        }
    }); 
</script>

When selecting the xls_download_button , the alert() never fires nor does any data get passed to export_data_to_excel.php

The export_data_to_excel.php file has the following:

<?php 
$results = json_decode($_POST['json_data']);
#include the export-xls.class.php file
require_once('export-xls.class.php');
$date = date('Y-m-d');
$filename = "contacts_search_$date.xls"; // The file name you want any resulting file to be called.
#create an instance of the class
$xls = new ExportXLS($filename, $results);
#lets set some headers for top of the spreadsheet
$header = "Searched Contact Results"; // single first col text
$xls->addHeader($header);
#add blank line
$header = null;
$xls->addHeader($header);
$header = null;
$row = null;
foreach($results as $outer){
   // header row
   foreach($outer as $key => $value){
     $header[] = $key; 
   }
  // Data Rows
  foreach($outer as $key => $value){
    $row[] = $value;
  }
  $xls->addRow($header);//add header to xls body
  $header = null;
  $xls->addRow($row); //add data to xls body 
  $row = null;
} 
# You can return the xls as a variable to use with;
# $sheet = $xls->returnSheet();
#
# OR
#
# You can send the sheet directly to the browser as a file 
#
$xls->sendFile();
?>

I do know that the $json_results does display proper JSON encoded values when echoed. But from there are not sure why the rest of the javascript does not run; the alerts never fire nor does the JSON data get passed?

Can you see why this isn't working?

Answer 1

Your PHP-supplied json is not stored as a javascript variable in your js.

$(document).ready(function(){ 
    var json_results = <?php echo $json_results; ?>;

...

Answer 2

Right now you are just setting a php variable called $results you need to transfear it to you javascript.

<script type="text/javascript">
// set javascript variable from php
var $results = "<?php echo json_decode($json_data); ?>";
</script>

Answer 3

This code shouldn't run:

function download_xls(){
$.post('./libs/common/export_data_to_excel.php', {json_data : json_results};
}

It is invalid (the ; doesn't belong there). Try this code:

function download_xls(){
  $.post('./libs/common/export_data_to_excel.php', {json_data : json_results});
}

Answer 4

For sure you have an error in your javascript code (you were not closing the parenthesis after $.post), should be:

$(document).ready(function() {
    alert($json_results);
    $("#xls_download_button").click(function(e) {
        alert('clicked');
        e.preventDefault();
        download_xls();
    });

    function download_xls() {
        $.post('./libs/common/export_data_to_excel.php', {
            json_data: json_results
        });
    }
});

Then you should assign your JSON to a javascript variable inside document.ready

$(document).ready(function() {
    var json_results = <?php   echo($json_results);?>;

Answer 5

You can't pass a PHP variable to the JavaScript like that: there live in totally different worlds. Use Ajax to get the JSON data from JS.