Using fnServerData fails with jQuery 1.5.1
Using fnServerData fails with jQuery 1.5.1
Hello all!
So I've been working away with DataTables and specifically the fnServerData function. What i'm looking to do is return a set of results from the server and have it render in the DataTables.
So here is my setup:
DataTables JS:
[code]
$(function(){
$('table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
'dataType' : 'json',
'type' : 'POST',
"url" : 'http://icarus/SF2/AJAX/ajax_tables/guest_surveysessions_table_data/2345',
"data" : aoData,
"success" : fnCallback
} );
}
});
});
[/code]
The truncated returned results:
[code]
{
"sEcho": 1,
"iTotalRecords": 114,
"iTotalDisplayRecords": 114,
"aaData": [
[
"Fri, March 4, 2011, 10:24 AM",
"Mon, March 15, 2010, 8:52 PM",
"Fare Rewards Guest Survey",
"Hemenway's",
"Survey Session Details<\/a>"
],
[
"Fri, March 4, 2011, 8:00 AM",
"Fri, March 4, 2011, 10:01 AM",
"Fare Rewards Guest Survey",
"Hemenway's",
"Survey Session Details<\/a>"
],
...
]
}
[/code]
The JSON is valid I ran it through jsonlint.com, and it came back with out a problem. The issue was when I use jQuery 1.5.1 being called with the Google JS Library script. It comes back with this error:
[code]Uncaught SyntaxError: Unexpected token :[/code]
But if I roll back to jQuery 1.4.4, I don't have any issues and it works fine. Anybody have any insight on why this would happen?
Thank you for the help!
So I've been working away with DataTables and specifically the fnServerData function. What i'm looking to do is return a set of results from the server and have it render in the DataTables.
So here is my setup:
DataTables JS:
[code]
$(function(){
$('table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
'dataType' : 'json',
'type' : 'POST',
"url" : 'http://icarus/SF2/AJAX/ajax_tables/guest_surveysessions_table_data/2345',
"data" : aoData,
"success" : fnCallback
} );
}
});
});
[/code]
The truncated returned results:
[code]
{
"sEcho": 1,
"iTotalRecords": 114,
"iTotalDisplayRecords": 114,
"aaData": [
[
"Fri, March 4, 2011, 10:24 AM",
"Mon, March 15, 2010, 8:52 PM",
"Fare Rewards Guest Survey",
"Hemenway's",
"Survey Session Details<\/a>"
],
[
"Fri, March 4, 2011, 8:00 AM",
"Fri, March 4, 2011, 10:01 AM",
"Fare Rewards Guest Survey",
"Hemenway's",
"Survey Session Details<\/a>"
],
...
]
}
[/code]
The JSON is valid I ran it through jsonlint.com, and it came back with out a problem. The issue was when I use jQuery 1.5.1 being called with the Google JS Library script. It comes back with this error:
[code]Uncaught SyntaxError: Unexpected token :[/code]
But if I roll back to jQuery 1.4.4, I don't have any issues and it works fine. Anybody have any insight on why this would happen?
Thank you for the help!
This discussion has been closed.
Replies
Allan
I had this jquery plugin enabled:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
[code]
fnServerObjectToArray = function ( aElements )
{
return function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for ( var i=0, iLen=json.aaData.length ; i
Allan
here is my code:
[code]
$(document).ready(function() {
$('#hosts').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":'/hosts',
"fnServerData": function ( sSource, aoData, fnCallback ) {
alert("");
aoData.push({ "name": "name", "adresss": "adresss", "comment": "comment"});
$.ajax({
'dataType': 'json',
'type': 'post',
"url": sSource,
"data":aoData,
"success": fnCallback
}
});
}
});
});
[/code]
Allan
but there is another error to show
[code]
oColumn is undefined
[Break On This Error]
oSettings.aaSorting[i][1] = oColumn.asSorting[0];
[/code]
what will be the reason? the data ?
and i do this with aoColumnDefs. Now it works.hah
hah thank you /smile
Note: this setup works fine if my source is not a cross domain call.
Code:
[code]
Test
var asInitVals = new Array();
$(document).ready(function (){
var oTable = $('#certifications').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost:7069/Partner/List?accountType=OEM",
"fnServerData": function (sSource, aoData, fnCallback){
$.ajax({
"dataType": 'jsonp',
"url": sSource,
"data": aoData,
"type": "post",
"success": fnCallback
});
}
});
});
[/code]
Update: (figured it out) It helps when the endpoint supports jsonp.
heh - good to hear you got it working.
Allan