Passing JavaScript variable between pages works fine, but DataTables is still erroring

lordterrin

For the LIFE of me I cannot figure this out.

Setup:

page 1: add.php
page 2: upload.php
page 3: return.php
On page one, the user uploads a spreadhseet from Excel:

<div id="return"></div>    
~~~~~
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){                    
                jsonResponse = data;
                $("#return").load("return.php")

            }           
       });
    }));
});

The Excel sheet is sent over to upload.php and a JSON response is returned with the data from the cells.

echo json_encode($out);

This is exactly how it looks in console.log

jsonResponse = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
 ]

On success, return.php is loaded into the #return div that exists on this first page and it attempts to build a dataTable with the JSON output... :

var table = $('#ltc-table').DataTable( {    
    "data" : jsonResponse,        
    "columns" : [
      { data : 'designCustomer' },
      { data : 'designCustomerLocation' },
      { data : 'dateReceived' }
  ]
});

However, I get the error: Uncaught Error: DataTables warning: table id=ltc-table - Requested unknown parameter 'designCustomer' for row 0.

What I don't understand:

jsonResponse is a variable that contains JSON, and when I use console.log(jsonResponse); on return.php, I get the exact string that I pasted above (so I assume jsonResponse is a variable I can on this page if console.log is reporting it), however, datatables says it can't find the variable, as it's issuing me this error.

If, on return.php, I create new code that flat out defines jsonResponse there instead:

jsonResponse = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
];

it works.

What am I doing wrong? Is this a problem of me passing the data from one page to another page loaded into a div on that first page? This is driving me crazy.....

I've tried using the datatools debugger, but it doesn't load - it just sits there thinking forever.

lordterrin

Ahh - I needed to put

dataType : "json", into the original ajax call.