ajax and fnServerData

maggus

Hi all,

I am trying to consume an ASP.NET Webservice using the following construct.

[code]
var oTable = $('table').dataTable({
bPaginate: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: "WebService1.asmx/GetData",
fnServerData: function ( sSource, aoData, fnCallback ) {
$.ajax({
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
[/code]

The WebService is called fine and the returned JSON looks like this:

{"sEcho":"2","iTotalRecords":"1000","iTotalDisplayRecords":"1000","aaData":[["2","Pokidova","Ekaterina"],["962","Willner","Horst"],["963","Steinberger","Florian"]]}

Checked it with JSONLint and also copied the output to a textfile and used it as sAjaxSource and everything is fine.

However using fnServerData and the Ajax Call, the processing label doesn't go away and no records show up in the table.
I also added a link to call the WebService and checked the Response directly and jquery parses the JSON just fine.

Is there any way to to implement an error function?

bsakwe

I am having the same kind of issue with java REST. The rest method is called without problem and my return value returns a json list of objects but I get the error message aaData is undefined

meigallodixital

Same problem here, with PHP returning JSON. JSON is ok returned but table don't populate data into cells. The th cells are correctly populated :?

meigallodixital

If anyone knows a workaround or solution for this problem, i will thank you forever :)

willowsticks

I am having the same problem...

Is there a way to just populate the table with a valid JSON object?

Emeka

... any fix for this?

aloofpanda

sEcho needs to be an integer. this thing is pretty specific, so make sure your var types match.

modernclix

If you still having issue try this example:

[code]

"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
});

[/code]

I hade the same issue as all of you, and this solved it.

gsingh

In my case, data tables is not showing data even with the following code:

$('#example').dataTable( {
//"sScrollY": 200,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": "true",
"bServerSide": true,
"iDisplayLength": 10,
"sAjaxSource": "servletname",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
});
}
});

Please let me know your findings and pointers to solve this problem. My goal is to handle errors, if we get bad response from server.

fbas

The $.ajax() call is JQuery, and you can specify an error function: error(jqXHR, textStatus, errorThrown)

try
[code]
$.ajax({
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function(jqXHR, textStatus, errorThrown) {
console.log(txtStatus, errorThrown); // use alert() if you prefer
}
});
[/code]

and see what error messages you're getting

http://api.jquery.com/jQuery.ajax/

witsiwit

[code]
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "getRecords.asp",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push({"name": "Param1", "value": "1"});
aoData.push({"name" : "Param2", "value" : "2"});
aoData.push({"name" : "Param3", "value" : "3"});
aoData.push({"name" : "Param4", "value" : "4"});

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
[/code]

after this, im having an error in
line: 3549
Char: 19
Error: 'length' is null or not an object

I believe that the getRecords.asp didn't successfully retrieved any records, Am i correct?
Am I passing my parameteres correctly?

fbas

which file is the error in? I'm guessing it's jquery.datatables.min.js.

use the non-minified js file, then see what's on that line.

if you can post a link to your code, that will help us take a look at the code and the debugger. we can at least help pinpoint where the code execution stops and enters the error.

anderson

I'm using Java and this is how I call my datatables:

[code]
$('#productsTable').dataTable( {
"oLanguage": {
"sLengthMenu": "Display " +lengthMenu+ " records per page"
},
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"sAjaxSource": "",
"aoColumns": [
{ "mDataProp": "id", "bVisible": false, "bSearchable": false },
{ "mDataProp": "name", "sWidth": "20%"},
{ "mDataProp": "address", "sWidth": "40%" }
]
});
[/code]

mDataProp column is the fields in my java beans (with getter and setter). It can even go deep like "address.city" in case address is an object inside my bean. Just thought maybe this helps. Ü

fbas

hard to say without seeing your link, or full code. and I recommend using the non-minified version of jquery.datatables.js and jquery.js while debugging.

witsiwit

the file in error is the jquery.dataTables.js
and the function in error is
function _fnAjaxUpdateDraw ( oSettings, json )
and the error line is
for ( var i=0, iLen=aData.length ; i

fbas

have you looked in the debugger at aData or your return json? I would guess the JSON you are returning is not valid, because [code]var aData = fnDataSrc( json ); // line 3546, right before the for loop[/code]