Datatables function 'fnAddData' not working in IE8 - works in all other browsers

pzurek

I have the following code that uses the fnAddData function to add JSON data I retrieve via AJAX to a table in the webpage. The code works in all browsers except IE8 and I can't figure out why. I've used IE8's developer tools to debug the script and all the variables are initialized and updated with the correct data from the AJAX call up to the point it calls fnAddData so I believe the problem to be with fnAddData (when I comment the line with fnAddData I don't get an error in IE8 -- see below for the error message).

Here I initialize the table:
[code]
incoming_manifests_table = $('#incoming-manifests').dataTable( {
'bFilter': false,
'sDom': '<"top">t<"bottom"><"clear">',
'bSort': false,
'aoColumns': [
{
'mDataProp': null,
'sClass': 'incoming_control center',
'sDefaultContent': ''
},
{ 'mDataProp': 'manifest_date', 'sWidth': '25%', 'sClass': 'highlight' },
{ 'mDataProp': 'shipped_to', 'sWidth': '25%', 'sClass': 'highlight center' },
{ 'mDataProp': 'bags', 'sWidth': '25%', 'sClass': 'highlight center' },
{ 'mDataProp': 'items', 'sWidth': '25%', 'sClass': 'highlight center' },
{ 'mDataProp': 'descriptor', 'sWidth': '25%', 'sClass': 'highlight', 'bVisible': false },
],
} );
[/code]

and I populate the table here:
[code]
incoming_manifests_table = $('#incoming-manifests').dataTable();
incoming_manifests_table.fnClearTable();
$('#incoming-ajax-progress').show();
$('#incoming-manifests').hide();
$.getJSON('/get_incoming_manifests_ajax/', function(data) {
$.each(data, function(index) {
var labels = data[index].labels;
id_in_labels[ data[index].manifest_date + data[index].incoming_code ] = labels;
incoming_manifests_table.fnAddData({'descriptor':data[index].manifest_date + data[index].incoming_code, 'manifest_date':data[index].manifest_date, 'shipped_to':data[index].incoming_code, 'bags':data[index].bags, 'items':data[index].items});
});
$('#incoming-ajax-progress').hide();
$('#incoming-manifests').show();
});
[/code]

Here is a sample row of the JSON data retrieved:
[code]
{"bags": 10, "manifest_date": "08-22-2013", "incoming_code": "ADL", "items": 11, "labels": , "incoming_inst": "Adler School of Professional Psychology"}
[/code]

All the data in the JSON labels element is used to populate a drill down box for that row in the table and I think it can safely be ignored for the purposes of this question so I've snipped it from the above sample row because it's lengthy.

When I use the developer tools to debug the code in IE8 the following message is popped up:

[quote]DataTables warning: (table id='incoming-manifests'): Requested unknown parameter '6' from the data source for row 0.[/quote]

This is repeated for each row in the table. Oddly enough, if I click through each error, the table then displays properly. *It only finally displays when debugging with the developer tools*. Which I think is really weird.

Finally, here is a link to the site (again it works in all browsers EXCEPT IE 8 which is what I'm trying to solve): http://ilds-devel.carli.illinois.edu/manifest/ Password is 'ilds' for any library.

Any ideas? Thanks for any help.

allan

You've got trailing commas in your Javascript. Old IE doesn't like that.

Allan

pzurek

That solved the problem. Thank you very much!