Problem: Firefox works fine; initialization error in IE; appears to be in datatables code. Bug?

BobR

Hello,

I have a data table with this code: [code] var oTable = $('#matches').dataTable({
"bDestroy": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bSort": false,
"sAjaxSource": "names.txt",
"sAjaxDataProp": "ResponseData",
"aoColumns": [
{ "sTitle": "", "sWidth": "8%", "mDataProp": "Warning", "sClass": "dmLeftAlign" },
{ "sTitle": "Name", "sWidth": "15%", "mDataProp": "Name", "sClass": "dmLeftAlign" },
{ "sTitle": "Race/Sex", "sWidth": "5%", "mDataProp": "Race/Sex", "sClass": "dmLeftAlign" },
{ "sTitle": "DOB/SSN", "sWidth": "15%", "mDataProp": "DOB/SSN", "sClass": "dmLeftAlign" },
{ "sTitle": "Address", "sWidth": "25%", "mDataProp": "Address", "sClass": "dmLeftAlign" },
],
"fnInitComplete": function () {
//Add the red, orange and yellow highlights to the appropriate nodes
var cNodes = oTable.fnGetNodes();
for (var i = 0; i < .cNodes.length; i++) {
switch (cNodes[i].childNodes[0].innerHTML.substring(0, 1)) {
case 'C':
for (var j = 0; j < cNodes[i].childNodes.length; j++) {
$(cNodes[i].childNodes[j]).addClass('dmRowHighlight Red');
} //next j
break;
case 'A':
for (var j = 0; j < cNodes[i].childNodes.length; j++) {
$(cNodes[i].childNodes[j]).addClass('dmRowHighlight Orange');
} //next j
break;
case 'P':
for (var j = 0; j < cNodes[i].childNodes.length; j++) {
$(cNodes[i].childNodes[j]).addClass('dmRowHighlight Yellow');
} //next j
} //switch
} //next i
} //function
}); //datatable
[/code]. This renders the table properly in Firefox. However, in IE (I'm using 9, have tried it in 8 and 7 mode too), I get this error: [quote]DataTables warning (table id = 'matches'): Requested unknown parameter '5' from the data source for row 0[/quote]
IE then renders an unformatted column at the end of the table with null values in it. This gave me the idea that there was some sort of discrepancy in the returned arrays between Firefox and IE. Sure enough, oTable.fnGetNodes returns an array of objects whose childNodes.length property is 6 in IE, and 5 in Firefox.

I tried removing code to see if some of my code recreated the error. I stripped it down to this: [code] var oTable = $('#matches').dataTable({
"sAjaxSource": "names.txt",
"sAjaxDataProp": "ResponseData",
"aoColumns": [
{ "mDataProp": "Warning"},
{ "mDataProp": "Name"},
{ "mDataProp": "Race/Sex"},
{ "mDataProp": "DOB/SSN" },
{ "mDataProp": "Address" },
],
}); //datatable
[/code]
This rendered the data in Firefox, minus any formatting, as expected. IE didn't render the table at all. I tried adding stuff back in, finally getting error, data, and empty null column when I added my InitComplete function back in.
I then tried replacing "childNodes.length" in my for loop with the number 5. Same error, same problem.

Digging around in jquery.dataTables.js, I got a bit of an idea how the tables are set up. Line 7180 says this: [code]for ( i=0, iLen=aoColumnsInit.length ; i

BobR

(Sorry, first time here. didn't know I could edit posts. I edited the OP.)

allan

You have a trailing comma in your initialisation for aoColumns which is causing the problem. IE rejects this, while some other browsers allow it. ECMAScript 5 rejects it for compliance with JSON: http://www.2ality.com/2011/06/object-literal-comma.html . Remove that comma and it should all work :-)

Allan

BobR

Thanks for your quick response, Allan; I missed that when I was stripping down the code. However, the comma belongs in the original version as in that version aoColumns is followed by the fnInitComplete argument. Furthermore, I haven't a comma after the fnInitComplete procedure, so that doesn't appear to resolve the original problem.

I have removed the comma, thus: [code] var oTable = $('#matches').dataTable({
"sAjaxSource": "names.txt",
"sAjaxDataProp": "ResponseData",
"aoColumns": [
{ "mDataProp": "Warning"},
{ "mDataProp": "Name"},
{ "mDataProp": "Race/Sex"},
{ "mDataProp": "DOB/SSN" },
{ "mDataProp": "Address" },
]
}); //datatable
[/code] and opened the page in both Firefox and IE. Firefox shows my data in the default format, but IE doesn't show the data at all. I'd just like to mention this for completeness's sake, as I'm really attempting to fix the original code rather than this stripped-down version.

In case there's something strange with it, here's a sample of the JSON file that I'm using: [quote]{
"ResponseCode":
0,
"ResponseData":[
{ "Warning": "",
"Name":"SMITH, CHARLES ",
"Race/Sex":"W, M",
"DOB/SSN":"01/01/1800, 999-99-9999",
"Address":"123 Any Street, CityTown, US"
},
{ "Warning": "",
"Name":"CLOONEY, GEORGE ",
"Race/Sex":"W, M",
"DOB/SSN":"01/01/1800, 999-99-9999",
"Address":"123 Any Street, CityTown, US"
},
{ "Warning": "",
"Name":"Major, Garland James",
"Race/Sex":"W, M",
"DOB/SSN":"01/01/1800, 999-99-9999",
"Address":"123 Any Street, CityTown, US"
},
{ "Warning": "",
"Name":"Reeves, Steve ",
"Race/Sex":"W, M",
"DOB/SSN":"01/01/1800, 999-99-9999",
"Address":"123 Any Street, CityTown, US"
},
{ "Warning": "",
"Name":"Davis, Jean ",
"Race/Sex":"W, F",
"DOB/SSN":"01/01/1800, 999-99-9999",
"Address":"123 Any Street, CityTown, US"
}
]
}[/quote]This syntax comes up in the validator as valid.

Can you shed any further light on this problem?

TIA

Bob

allan

You've still got a trailing comma in your initialisation code:

[code]
{ "mDataProp": "Address" },
[/code]

Allan

BobR

Well, now I feel silly, but I can't stay a newbie forever thank goodness. That repaired the problem of course. Thanks Allan!