SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
I am new to DataTables, and have not been able to get a very simple example to work. I am getting the following error in IE 9.0:
SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
jquery.dataTables.js, line 5585 character 7
I am using the jquery.js and jquery.dataTables.js files that I downloaded as part of DataTables-1.8.1.zip, and I have confirmed that they are being loaded from the location I specified in the src attribute of the script elements.
Here is the HTML file that is causing the SCRIPT5007 error (it is obviously adapted from one of the examples). Any insight into what I am doing wrong will be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DataTables Grid Example
$(function () {
$("#example").dataTable( {
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version"},
{"sTitle": "Grade"}
]
});
} );
Column 1
Row 1 Data 1
SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
jquery.dataTables.js, line 5585 character 7
I am using the jquery.js and jquery.dataTables.js files that I downloaded as part of DataTables-1.8.1.zip, and I have confirmed that they are being loaded from the location I specified in the src attribute of the script elements.
Here is the HTML file that is causing the SCRIPT5007 error (it is obviously adapted from one of the examples). Any insight into what I am doing wrong will be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DataTables Grid Example
$(function () {
$("#example").dataTable( {
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version"},
{"sTitle": "Grade"}
]
});
} );
Column 1
Row 1 Data 1
This discussion has been closed.
Replies
I'm assuming that the numbers in your aaData will be converted gracefully to strings and that's not an issue.
After a little JavaScript debugging, I found the error that was already familiar to me... Here's my code:
[code]
aoColumns: [
{ mDataProp: "CustomerName" },
{ mDataProp: "Address" },
{ mDataProp: "CityStateZip" },
{ mDataProp: "PhoneNumber" },
{ mDataProp: "BalanceDue" },
]
[/code]
Notice that extra comma after the last element in the array? Apparently IE8 (and below) are adding an extra empty element when you have it after the last item in an array. So in my case, this created an empty sixth item which caused an error during rendering. Luckily, I had seen this before so it didn't took me too long to find the issue.
Hope this will help somebody. More info here:
http://trailingcomma.com/ (yep, there's even a website dedicated to this)
http://www.enterprisedojo.com/2010/12/19/beware-the-trailing-comma-of-death/