fnDestroy issue with JQuery 1.5 and IE7

johnc

I have recently upgraded to JQuery 1.5.

The following works fine with JQuery 1.4.2.
In JQuery 1.5 I get a javascript null object error in IE7 but it works fine in Firefox and Chrome.

$("#item").dataTable(.......); /// initialise the datatable

$("#item").dataTable().fnDestroy();

// this line works in JQuery 1.4.2 but throws a javascript null object exception in JQuery 1.5
$("#item").dataTable(.......); /// reinitialise the datatable

allan

I've just been doing some memory tests with jQuery 1.5 and fnDestroy(), repeating the creation of the table over and over and not noticed a problem. Could you possibly link to an example showing this problem please?

Allan

RyanP13

Hi Allan,

I'm a dev working with johnc on the same project. This issue is really killing us as it is fine in the older version of jQuery.

To expand on the summary John made above we are initialising datatables on two tables, both with server side data. The first table is initialised on page load and the second is initialised in a modal dialog with the jQuery plugin Colorbox.

When the application is first opened a function is called that initialises datatables on a table with ID of 'quotations' like so:

[code]
function reInitialiseQuoteTable() {

$('#quotations').dataTable({
"fnInitComplete": function() {
// custom scroll bars
$('#icis_dashboard')
.find('.w_price_assess .dataTables_scrollBody')
.jScrollPane();
},
"bAutoWidth": false,
"bPaginate": false,
"sScrollY": "242px",
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"aaSorting": [[2, 'asc']],
"aoColumns": [
{ "sSortDataType": "dom-checkbox", "sWidth": "3%" },
{ "bSortable": true, "sWidth": "8%" },
{ "bSortable": true, "sWidth": "10%" },
{ "bSortable": true, "sWidth": "15%" },
{ "bSortable": true, "sWidth": "8%" },
{ "bSortable": true, "sWidth": "9%" },
{ "bSortable": true, "sWidth": "6%" },
{ "bSortable": false, "sWidth": "2%" },
{ "bSortable": false, "sWidth": "7%" },
{ "bSortable": false, "sWidth": "13%" },
{ "bSortable": false, "sWidth": "2%" },
{ "bSortable": false, "sWidth": "7%" },
{ "bSortable": false, "sWidth": "10%" }
]
});
}
[/code]

Then when a user initiates the dialog, the dialog opens the previious quotations table is destroyed and then datatables is initialised on the new table with ID 'quote_prefs':

[code]
// Quote preferences dialog
function initialiseQuoteFavouritesSelectionTable() {

$("#quote_prefs").dataTable({
//"bRetrieve": true,
//"bDestroy": true,
"aaSorting": [[1, 'asc']], //disable default sorting order
"bLengthChange": false, //remove drop-down for length change
"bPaginate": true, //pagination
"sPaginationType": "full_numbers",
"bProcessing": false, //disables processing indicator
"iDisplayLength": 15, //set display length
"bSortClasses": true, //turn off sorting classes
"bAutoWidth": false, //smart column width calculation
"bFilter": true, //turn off filtering
"sDom": 'l<"wrap"t>ip', //re-order datatable elements: length, wrap div > table, information, pagination
"aoColumnDefs": [
{ "sName": "Selected", "aTargets": [0], "sWidth": "4%", "bSortable": false },
{ "sName": "Commodity", "aTargets": [1], "sWidth": "18%" },
{ "sName": "GradeDisplay", "aTargets": [2], "sWidth": "20%", "bSortable": false },
{ "sName": "TermName", "aTargets": [3], "sWidth": "10%" },
{ "sName": "LocationName", "aTargets": [4], "sWidth": "12%" },
{ "sName": "UnitDisplay", "aTargets": [5], "sWidth": "8%" },
{ "sName": "Properties", "aTargets": [6], "sWidth": "10%", "bSortable": false },
{ "sName": "StartDate", "aTargets": [7], "sWidth": "7.5%" },
{ "sName": "LatestDate", "aTargets": [8], "sWidth": "7.5%" },
{ "sName": "Notes", "aTargets": [9], "sWidth": "3%", "bSortable": false }
],
"sAjaxSource": DashboardApplicationRoot + "Quote/FavouriteQuoteSelection",
"bServerSide": true,
"fnServerData": function(sSource, aoData, fnCallback) {
addDataForServerSideProcessing(aoData);
getPaginatedQuotes(sSource, aoData, fnCallback);
}
});
}
[/code]

RyanP13

To follow on from the above the issue appears to be occurring when the dialog is opened as we need to destroy the old 'quotations' with the following code as it seemed to interfere with the new datatables settings for the 'quote_prefs' table in the dialog:

[code]
$.ajax({// retrieve data prior to lightbox
type: 'GET',
url: $href,
dataType: 'html',
cache: false,
beforeSend: function() {
showLoadingGraphic();
},
success: function(data) {
$("#dashboard_dialog").prepend(data);
$("#preferences_form").hide();
modalDialog({//disable close on escape/overlay on first login
title: 'Quotation preferences',
width: '860px',
height: '553px',
inline: true,
href: '#preferences_form',
overlayClose: false,
escKey: false,
onLoadCall: function() {

// destroy the 'quotations' datatable as interferes with new one
$('#quotations').dataTable().fnDestroy();

$("#cboxClose").hide(); //hide close button for first login
$("#preferences_form").show();

// initialise datatables on 'quote_prefs' table
initialiseQuoteFavouritesSelectionTable();

},
onClosedCall: function() {//remove form from DOM
$("#preferences_form").empty().remove();
}
});
},
error: function(xhr) {//error handling
});
[/code]

So as we have destroyed the previous table when the dialog is closed it returns a JS error in IE7 and IE6 saying that it cannot find the 'quotations' tabel to initialise it.

Thanks for your time for looking at this, it is greatly appreciated.

Ryan

allan

I don't suppose you happen to be using the jQuery validation plug-in - it rather sounds like the issue that it has with jsonp and jQuery 1.5 (an invalid label error - http://datatables.net/forums/comments.php?DiscussionID=4133&page=1#Item_5 ).

If that isn't the answer, can you post a link please (or send it to be directly if you don't want to make it public: http://datatables.net/contact ).

Allan

RyanP13

Unfortunately we are not using the plugin you mention.

We are working locally so will be unabel to provide a direct link as we cannot deploy to our externally accessible site with this defect.

I hope to get a demo version in JSFiddle runnign today where i shall try and replicate the defect.

Speaking to johnc this morning he may have mroe information to post in a mo.

Thanks,

Ryan

johnc

I have traced the problem and found that it comes from enabling sorting on the table header. Tracing through the code, when a click event is bind to a table header column, a JQuery expando is added to the tag and an corresponding entry is added to the JQuery cache. When the table is destroy which I presume the event is undbind, then the expando should be removed and the entry in the cache deleted. However I noticed that cache is deleted but the expando is not removed from the table header.

When we reinitialise the table it sees the expando and therefore tries to find the corresponding entry in the JQuery cache, which does not exist, hence throw a null object error.

Not too sure whether it is a JScrollPane issue or JQuery. However someone has encountered a similar problem and has recommended a fix see http://bugs.jquery.com/ticket/8235.

greenflash

I see a similar problem. If I'm using IE7 or IE8 and call fnDestroy() I get the error message

SCRIPT5007: Unable to get value of the property 'jQuery15108300618450999001': object is null or undefined

at jquery.min.js, line 16 character 18471

I'm using jQuery 1.5.1.

For the moment I'm getting round this by just disabling the functionality which relies on fnDestroy() for IE8 and below users (it's OK in IE9).

[Maybe there's a better way of doing what I want to do without having to use fnDestroy()? I'm offering users a button which allows them to switch between using paging and vertical scrolling. I'm doing this by destroying the datatable and then reinitialising a new one.]

Campbell

allan

I think fnDestroy is the correct way of doing that - there is no option for changing features after initialisation. Can you give us a link to your page? Did you have a look and see if the fix johnc found helps?

Allan

davec

Just checking-in to report that I'm having the same issue when calling fnDestroy() with JQuery 1.5.0, 1.5.1, and 1.5.2 - within IE7, IE8, and IE9.

JQuery 1.4.4 is OK, so I'm back to this for now.

Regards,
Dave

scottplumlee

I've run into this exact problem, and found that the fix suggested in jquery bug 8235 linked above (http://bugs.jquery.com/ticket/8235) seems to fix it. I extend jQuery with the fixed function and then fnDestroy behaves as expected. This let me use jQuery 1.5.x without any issues. The bug was closed due to lack of follow up, so I can't be certain if it was truly a jquery issue or not. Will try to post an example once I get it finalized, but wanted to confirm the issue.

allan

Thanks for the update scottplumlee. I don't support you have the code for your example which was triggering this? I've not seen the problem myself, but I don't really use jQuery.data much - presumably you need to have used it on the table to trigger this? If so, it sounds like it would be a nice one to get fixed in jQuery core.

Allan