Processing not working when JSON has only one row with a null value
Processing not working when JSON has only one row with a null value
boni
Posts: 6Questions: 0Answers: 0
Here's the situation: I have a table that displays assignments, but the end-date of the assignment can be null.
It works fine when there are assignments with end-dates, however as soon as my data only contains a single record, and the end-date is null, it doesn't work anymore.
I'm using sAjaxSource to get the JSON data and when that happens I get the following JS-Error:
[quote]"Uncaught TypeError: Cannot read property 'length' of null" in jquery.dataTables.js:2649[/quote]
Here is my Table:
[code]projectMemberTable = $('#project_member_entries').dataTable({
"bProcessing" : true,
"sAjaxDataProp" : "data",
"sAjaxSource" : baseURL + memberURL + '/all',
"aoColumns" : [ {
"mData" : "id",
"bSearchable" : false,
"bVisible" : false
}, {
"mData" : "user",
"bSearchable" : false,
"bVisible" : false
}, {
"mData" : "userName"
}, {
"mData" : "role",
"mRender" : function(data, type, full) {
return projectRoles[data];
}
}, {
"mData" : "startDate",
"mRender" : dataTableDate
}, {
"mData" : "endDate",
"mRender" : dataTableDate
}, {
"mData" : null,
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return '';
}
}, {
"mData" : null,
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return '';
}
} ]
});[/code]
And here is the exact JSON that causes this problem:
[code]{
"data" : [ {
"id" : 128,
"user" : 5,
"project" : 127,
"startDate" : "2012-12-22T15:13",
"endDate" : null,
"userName" : "Benjamin Boss",
"role" : "LEADER"
} ]
}[/code]
I've tried to debug it, but I can't seem to find the reason. :/
It works fine when there are assignments with end-dates, however as soon as my data only contains a single record, and the end-date is null, it doesn't work anymore.
I'm using sAjaxSource to get the JSON data and when that happens I get the following JS-Error:
[quote]"Uncaught TypeError: Cannot read property 'length' of null" in jquery.dataTables.js:2649[/quote]
Here is my Table:
[code]projectMemberTable = $('#project_member_entries').dataTable({
"bProcessing" : true,
"sAjaxDataProp" : "data",
"sAjaxSource" : baseURL + memberURL + '/all',
"aoColumns" : [ {
"mData" : "id",
"bSearchable" : false,
"bVisible" : false
}, {
"mData" : "user",
"bSearchable" : false,
"bVisible" : false
}, {
"mData" : "userName"
}, {
"mData" : "role",
"mRender" : function(data, type, full) {
return projectRoles[data];
}
}, {
"mData" : "startDate",
"mRender" : dataTableDate
}, {
"mData" : "endDate",
"mRender" : dataTableDate
}, {
"mData" : null,
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return '';
}
}, {
"mData" : null,
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return '';
}
} ]
});[/code]
And here is the exact JSON that causes this problem:
[code]{
"data" : [ {
"id" : 128,
"user" : 5,
"project" : 127,
"startDate" : "2012-12-22T15:13",
"endDate" : null,
"userName" : "Benjamin Boss",
"role" : "LEADER"
} ]
}[/code]
I've tried to debug it, but I can't seem to find the reason. :/
This discussion has been closed.
Replies
Allan
It's really weird, because it causes no problems if there are two entries, and the second one contains a null, it works without problems:
[code]{
"data" : [ {
"id" : 5,
"user" : 1,
"project" : 1,
"startDate" : "2013-10-19T08:23",
"endDate" : "2014-10-19T08:23",
"userName" : "Max Mustermann",
"role" : "MEMBER"
}, {
"id" : 4,
"user" : 5,
"project" : 1,
"startDate" : "2011-10-19T08:23",
"endDate" : "2012-12-31T00:00",
"userName" : "Benjamin Boss",
"role" : "LEADER"
}, {
"id" : 141,
"user" : 5,
"project" : 1,
"startDate" : "2012-12-31T00:00",
"endDate" : null,
"userName" : "Benjamin Boss",
"role" : "MEMBER"
} ]
}[/code]
This json correctly displays the 3 rows in the table, while the one in my first post just displays nothing and the datatable is stuck at "Processing". With the 3-entry-json, no javascript-error is thrown. So it seems to me that the handling of null if it's in the first/only row is a problem?
I can change my webservice to return an empty string instead of null for all those instances, shouldn't be a problem. But looks like a bug to me. :)
Merry Christmas and thanks for everything (including the awesome datatable)!
However, as you can see in this example I just put together, it should work just fine: http://live.datatables.net/odogus/edit#javascript,html
Allan
Might be the that it was a problem in combination with the browser cache. It sometimes just refuses to refresh. I can't reproduce the problem right now, so I'll asume it just magically fixed itself over christmas. ;)
Thanks for your help, I'll try to save/create a small testcase if it happens again.
Allan
The error: Uncaught TypeError: Cannot read property 'length' of null
What's happening: Processing... is just shown forever
What data: The data is received via ajax and nested in a json object. But the data itself is null.
Excuse the terrible coding, but I just tried to get a quick and dirty test case together and had no proper way of uploading stuff. I used your example from above as base. :)
Here is the bad test case:
Website: http://boni.bbgen.net/dt.html
Data: http://boni.bbgen.net/empty.json
Here is a good test case, to show you that it works with correct data:
Website: http://boni.bbgen.net/dt2.html
Data: http://boni.bbgen.net/valid.json
Please tell me if that helps. :)
{
"data": null
}
[/code]
Change that to an empty array rather than `null` and it should work okay :-). Your JSON there is valid, but DataTables doesn't know what to do with it. Possibly it should handle that, and I'll look into that, but for the moment, just return an empty array when you've got no data. I'd say that's a more accurate representation of the data (or lack of it) anyway.
Allan