Getting Cannot read property 'Length' of undefined in Chrome error

nikki

Hi I'm trying to get a Datatables.net working with an ajax datasource from a c# asp.net webservice . I have gone through all the posts i could find with this error and no luck, I am hoping there is an answer. I have thus far invested a large amount of time getting this far, getting this last step will be Amazing.

This is the Error:

Uncaught TypeError: Cannot read property 'length' of undefined
_fnAjaxUpdateDrawjquery.dataTables.js:3591
$.fn.dataTable.iColumnsjquery.dataTables.js:3454
f.Callbacks.njquery-1.7.1.min.js:2
f.Callbacks.o.fireWithjquery-1.7.1.min.js:2
wjquery-1.7.1.min.js:4
f.support.ajax.f.ajaxTransport.send.d

and in IE

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined
jquery.dataTables.js, line 3591 character 19

This is my table:
[code]




Customer


Name


Reps


Claims


Amount







[/code]

I'm getting a valid json string, but there could be syntax issues ::(both json strings are copied form fiddler)

{"d":"{\"sEcho\": 1,\"iTotalRecords\": 4398,\"iTotalDisplayRecords\": 4398, \"aaData\": [ {\"00000\", \"ELECTRIC CO\", \"0\", \"0\", \"0\"},{\"1001\", \"CASCADE\", \"2\", \"0\", \"0\"},{\"10C84\", \"ENTERPRISES\", \"0\", \"0\", \"0\"},{\"10D98\", \"BUILDER SPECIALTIES\", \"0\", \"0\", \"0\"},{\"10L62\", \"ENTERPRISE\", \"0\", \"0\", \"0\"},{\"10M13\", \"SUPPLY\", \"0\", \"0\", \"0\"},{\"10M14\", \"BUILDERS SUPPLY\", \"0\", \"0\", \"0\"},{\"10113\", \"BRANDS/#46\", \"0\", \"0\", \"0\"},{\"10448\", \"HOME\", \"7\", \"0\", \"0\"},{\"15551\", \"DESIGN, INC.\", \"0\", \"0\", \"0\"}]}"}



The DataTable Initialization::
[code]
$("#selectProgram").dataTable({
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/service/GetPending.asmx/GetDataTablesLoad",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":fnCallback
});
}
}); [/code]

nikki

Figured this out, will post an answer tomorrow.

nikki

When the string was returned from the asmx web service, it was wrapped in double quotes and then wrapped inside the d object. The d object was being read as a object, but every level underneath was seen as one large string. This extra double quote wrapping was not allowing datatables.net to read the return data as an object, instead it read as a string. Since it was a string, when Datatables attempted parsing the data by checking the length iTotalRecords or any other item, it was undefined and could not find the length.

This is the final ajax call that worked, had to use $.evalJson on the d object, then send the result of this into the fnCallback .

[code]
$("#selectProgram").dataTable({
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetPending.asmx/GetDataTablesLoad",
"sPaginationType": "full_numbers",
"aaSorting": [[1, 'asc']],
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
var json = $.evalJSON(msg.d);
fnCallback(json);
}
});
}
});

[/code]

allan

It looks to me that the "JSON" returned from the server isn't really JSON, but rather a string - hence why it needs to be eval'ed twice - once by jQuery and once yourself. Actually - more accurately the object DataTables is looking for is a string - i.e.:

[code]
{
"d": string....
}
[/code]

If you could just pass back the "inner" object (i.e. the value of 'd') as an object rather than a string, that would do it nicely without any need for fnServerData.

Allan

nikki

Allen, thanks for the reply, so i wouldnt even need to use the fnSererData? Just put the service name in the sAjaxSource and return an object? Nice! I'll have to give that a shot.

allan

Yup - exactly that :-)

Allan