Unable to load jsonp data

tjonsek

I'm new to both json/jsonp and datatables. I've been tasked with figuring it out and using it for cross-domain issues regarding moving/sharing data between legacy and new systems.

I'm unable to load jsonp data into the datatable. It gets hung up at the processing label. I've tried quite a few options, read forums, etc. for the last 24 hours and am unable to figure it out. I can see the response I am getting. I validated the response and it seems fine. I just don't know how to get the data to appear.

Many thanks in advance.

Here is my document.ready statement:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": false,
"sAjaxSource": "http://localhost/completedProjects?programID=11&jsonp=callback",
"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
} );


Here's the table:



Contract #
Project ID
First Name
Last Name
Site Company Name
Site Address
City
State
Zip
Total kW
Total kWh






And here's the jsonp response:
callback([{"AccountNumber":"9526496","ProjectID":2,"SponsorName":"Names","CompanyName":"93335 Stage Store #697","Address":"1112 S Main Street Grove ","TotalkW":4.01698,"TotalkWh":17153.85,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"95733-0-4","ProjectID":1,"SponsorName":"Marj Watts","CompanyName":"German Church","Address":"1438 S. Indianapolis Shreveport LA 74112","TotalkW":8.8176,"TotalkWh":17506.944,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"465465464","ProjectID":4,"SponsorName":"test test","CompanyName":"test","Address":"test test OK 73106","TotalkW":37.05,"TotalkWh":145635,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"123123132131311","ProjectID":7,"SponsorName":"test test","CompanyName":"test","Address":"test test OK 73214","TotalkW":23.4,"TotalkWh":91980,"IncentiveAmount":null,"ApprovedDate":null}]);

Right now, it's dummy data, etc. not pointed at a real project, as you can guess by looking.

Debug Code: utoqef

allan

> callback(

That looks dodgy to me - I'd expect it to have a unique number on the function name if nothing else. Have a look at the Ajax returns in my demo for example: http://datatables.net/release-datatables/examples/server_side/jsonp.html . Are you using the 'callback' parameter that jQuery sends you?

Allan

tjonsek

Do you mean I'm supposed to receive the response as callback_1( json here)? We are writing code for the site sending the jsonp as well and I don't know if/how to make all the pieces fit.

I"m going to check out your examples. I can say that we are able to see the Response and see the json. Also, I put the response without the jsonp wrapper in a text file and used that as our datasource and the table loaded the data. It just seems it can't handle the text "callback(" at the beginning.

I've tried several settings, like setting datatype to jsonp, defining the columns, making sure we had the exact count and adding the text "aaData:" to the beginning - all pieces which seemed to get us closer but not there.

It seems as if there would be a very straightforward way of pulling in jsonp data but I've not found any examples and certainly none that work on our site.

tjonsek

But when you ask if I'm using the 'callback' parameter, what do you mean by using it?

tjonsek

Let me show you the code that works without jsonp data format.
$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'json.txt',
"aoColumns": [
{ "mDataProp": "AccountNumber" },
{ "mDataProp": "ProjectID" },
{ "mDataProp": "SponsorName" },
{ "mDataProp": "CompanyName" },
{ "mDataProp": "Address" },
{ "mDataProp": "TotalkW" },
{ "mDataProp": "TotalkWh" },
{ "mDataProp": "IncentiveAmount" },
{ "mDataProp": "ApprovedDate" }
]
});

});


And here is the contents of json.txt:

{ "aaData":[{"AccountNumber":"95264965302","ProjectID":325,"SponsorName":"Tanya Bell","CompanyName":"93335 Stage Store #697","Address":"1112 S Main Street Grove TX 74344","TotalkW":4.01698,"TotalkWh":17153.85,"IncentiveAmount":null,"ApprovedDate":null}]}


The only thing I did was strip the text "callback(" from the front and the ending parentheses at the end of the jsonp response. If I leave it in, the table is unable to load the data.

tjonsek

If I connect straight to the source, this is the response we receive, but it errors out, staying on the "processing' label rather than loading:

callback({"aaData":[{"AccountNumber":"95264965302","ProjectID":325,"SponsorName":"Tanya Bell","CompanyName":"93335 Stage Store #697","Address":"1112 S Main Street Grove TX 74344","TotalkW":4.01698,"TotalkWh":17153.85,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"957-625-433-0-4","ProjectID":393,"SponsorName":"Marj Watts","CompanyName":"East Side Christian Church","Address":"1438 S. Indianapolis Tulsa OK 74112","TotalkW":8.8176,"TotalkWh":17506.944,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"456456465465464","ProjectID":424,"SponsorName":"test test","CompanyName":"test","Address":"test test OK 73106","TotalkW":37.05,"TotalkWh":145635,"IncentiveAmount":null,"ApprovedDate":null},{"AccountNumber":"123123132131311","ProjectID":425,"SponsorName":"test test","CompanyName":"test","Address":"test test OK 73214","TotalkW":23.4,"TotalkWh":91980,"IncentiveAmount":null,"ApprovedDate":null}]});

tjonsek

I know I keep writing, but your demo was the first place I looked. It didn't work for us, though I think it has more to do with our response than anything.

tjonsek

One more thing - when we are in debug mode - using the code from your demo, the aoData var never has data in it. Yet, we are able to see the response and the json array sent in Firefox.

tjonsek

Just for anyone who may have the same issue, we managed to get & consume the data for datatables with the following code:




function callback(test) {
$('#example').dataTable({
"aaData": test.aaData,
"aoColumns": [
{ "mDataProp": "AccountNumber" },
{ "mDataProp": "ProjectID" },
{ "mDataProp": "SponsorName" },
{ "mDataProp": "CompanyName" },
{ "mDataProp": "Address" },
{ "mDataProp": "TotalkW" },
{ "mDataProp": "TotalkWh" },
{ "mDataProp": "IncentiveAmount" },
{ "mDataProp": "ApprovedDate" }
]
});
};


var doTest = function () {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://localhost/completedProjects?programID=11&jsonp=callback');
document.body.appendChild(script);
};


$(document).ready(function () {
doTest();


});

zanedev

Thanks tjonsek, I think it's worth pointing out to people that this is a way to load the data cross domain first, then feed that into datatables. One tradeoff worth mentioning is that you won't get the built in processing notice while you are loading the data external from the datatable initialization etc so you have to handle that yourself. So if you just want to load the data via jsonp but continue to leave everything client side with datatables then this is the approach you want.

The other way to load cross domain is to use the jsonp route built into datatables which requires server side processing to be turned on. If you want to hand off all the processing, sorting, filtering and so on then you can use the built in jsonp approach like illustrated here: http://datatables.net/release-datatables/examples/server_side/jsonp.html and the return data must match the format illustrated here: http://datatables.net/release-datatables/examples/data_sources/server_side.html