JavaScript Error "_iDisplayStart is null or not an object" after loading second datatable

miarde

Hi Allan.

I'm converting my company's datatables over from YUI to JQuery. I'm in desperate need of help here - I've looked at this for a week now and when I think I finally got everything working, I get the strange JavaScript error shown in the Title. This is the last obstacle from completing my project so any help you can give is greatly appreciated.

Environment:
- JQuery 1.6.3
- JQuery DataTables 1.8.2
- JQuery UI 1.8.11
- IE 7

Background:
When a user opens my application, they see a list of links to display record info, for example:
link 1
link 2
link 3
etc.

When a link is clicked, I make a client-side call to retrieve an HTML table (used for the datatable) and some JavaScript to initialize the datatable. I populate a container DIV with the table (DOM data source) and the following script:

[code]

$(document).ready(function() {
/* Create datatable */
var commentsDataTable = $('#commentsDataTable').dataTable({
"bJQueryUI": false,
"sPaginationType": "full_numbers",
"iDisplayStart":0,
"aoColumnDefs": [
{"asSorting":["desc","asc"],"aTargets":[0]},
{"sClass":"center","aTargets":[0,1,2,3]},
{"bVisible":false,"aTargets":[4]}
],
"oLanguage": {
"sEmptyTable": "There are no comments to display."
}
});

/* Add click function to the row cells */
$('#commentsDataTable tbody td').live('click', function(){
var cellID = $(this).attr('id');
var position = commentsDataTable.fnGetPosition( this );

/* Get the data array for this row */
var rowArray = commentsDataTable.fnGetData(position[0]);
var additionalNotes = rowArray[4];

//call custom function to display a dialog with the hidden column's information
showAdditionalNotesDialog3(cellID, additionalNotes);
});
});

[/code]

The very first link that is clicked, everything works perfectly. The datatable is created, the click event works properly, I show a dialog with the contents of a hidden column.

The problem occurs if the user tries to open a second link. The datatable appears fine, but as soon as a cell is clicked, the now annoying [quote]_iDisplayStart is null or not an object[/quote] JavaScript error appears. Reloading the entire page is not an option, it has to be a client-side call to retrieve the next datatable html and script. I'm not an expert an event propagation so I can only guess that something is going on with the .live() part of the cell click function.

Every time a link is clicked, I remove the datatable's container and all children from the DOM before making the call to fetch another datatable. It just seems like the event remains and is screwing up the second table's click function.

I'm desperate for any help anyone can give in figuring out what I can do to get rid of the error for subsequent loads of datatable content and script.

Thanks in advance.

allan

So on the load of the second table you are using a new DataTable with a different DOM table element, but the same ID. Is that correct? What I would suggest is that you should destroy ( fnDestroy ) the table just before you remove it from the DOM. That will remove it and all of its data (v1.9 has an option to remove the table as well from the DOM, as 1.8.2 will just put it back in its original state, leaving you to remove it).

Hopefully that will do the trick!
Allan

miarde

Thanks for replying so quickly, Allan. You are correct, different DOM table, same ID. I was able to fix the problem about 20 mins ago by using:

[code]$('#commentsDataTable tbody').delegate('td','click', function(){});[/code]

instead of:

[code]$('#commentsDataTable tbody td').live('click', function(){});[/code]

The reason seems to be that when using .live, it adds the event handler to the document node rather than the individual matched elements - that won't cause the error if you reload the page but it does if you dynamically create new datatables, regardless of if you removed the datatable container or not.

According to JQuery, .live() is deprecated as of 1.7 and if you're still using < 1.7, the preferred method of attaching event handlers is to use the .delegate() method - that should take care of strange issues when dynamically loading content - it did for me!

Thanks again for your time - I was going gray by the second and this is such a big part of my project.