sScrollY, sScrollX have problem in IE8

kenxu

Hi,

I have a datatable which worked fine for long time. Today I added sScrollY and sScrollX options to it and it starts to cause problem in IE8. It still works fine in Chrome though. I haven't tried other browsers.

I initialize datatable as following:
[code]
var $dataTable = $(".search-result-table", $container).dataTable( {
"bJQueryUI" : true,
"sScrollY" : 220,
"sScrollX" : "100%",
"bPaginate" : false,
"bFilter" : false,
"bSort" : false,
"bSortClasses" : false,
"bInfo" : false,
"sDom" : '<"result-list"t>'
});
[/code]

Then I attach some click event listeners to table headers "th" for customized dropdown menu.

At some point, I destroy the data table and re-create it:
[code]
// Destroy datatable
if ($dataTable) {
$dataTable.fnDestroy();
$dataTable = null;
}

// Dump table html
$(".table-container").empty();

// Re-create datatable
...
[/code]

Please note that $(".table-container") is the element which contains the data table. Above code gets to an error when reach line $(".table-container").empty(). The error is " 'events' is null or not an object" from jquery-1.4.2.js, line 4519. Below code is from jquery-1.4.2.js, I debug it and find that variable "data" is null.

[code]
for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
id = elem[ jQuery.expando ];

if ( id ) {
data = cache[ id ];

if ( data.events ) {
for ( var type in data.events ) {
if ( special[ type ] ) {
jQuery.event.remove( elem, type );

} else {
removeEvent( elem, type, data.handle );
}
}
}

if ( deleteExpando ) {
delete elem[ jQuery.expando ];

} else if ( elem.removeAttribute ) {
elem.removeAttribute( jQuery.expando );
}

delete cache[ id ];
}
}
[/code]

I am using Jquery 1.4.2 and DataTables 1.7 beta 3. Even I upgrade to DataTables 1.7.1 doesn't solve the problem.

I know the error is from Jquery, but it seems relate to DataTables, specially to sScrollY and sScrollX. Could you take a look at this? Thank you in advance.

allan

It may be relevant - it may not, but there is a bug with scrolling an fnDestroy in 1.7.1 (and prior to that), whereby the table isn't correctly destroyed. This will be fixed in 1.7.2 - but you can grab a development copy from here: http://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js , which does fix this issue.

Beyond that, you say you bound events to the header, did you also unbind them?

Regards,
Allan

kenxu

Hi, Allan,

I update to 1.7.2 development copy and unbind events before destroy datatable. But it doesn't resolve the problem.

Any other thought? Thank you.

Ken

allan

Hi Ken,

From quickly searching around it looks like it might indeed be a bug in jQuery: http://dev.jquery.com/ticket/6925 . No acceptance of the bug yet though, so unconfirmed - but it does seem rather like what you are seeing.

I don't see anything obvious in your Datatables init and destroy code that you posted - it looks like good practice code to me actually. Are you able to put up an example which shows the issue? And can it be repeated if you don't initialise DataTables? If it cannot, what happens if you put an event handler on some of the cells (again without DataTables) and then do the destroy.

Sounds like one that needs some debugging :-(

Regards,
Allan

kenxu

Hi, Allan,

I narrowed down the problem that it is probably related to .fnSort(). There is no problem if I don't call fnSort().

I was too busy to find out the root cause but there is a workaround:
Don't call JQuery empty() method, instead, set the element's innerHTML = "".

Hope to get back to this when I have time.

Regards,
Ken

allan

It looks like the jQuery issue has been fixed and committed now ( http://github.com/jquery/jquery/commit/f68b46d7abb54cdcd3d1ce1713bc989f992d1448 ) - it might be worth trying it out with a jQuery nightly: http://code.jquery.com/jquery-nightly.js

Allan