Deleting row after reloading table - s is null error

euangreen

Hi,

I'm using datatables within a jquery tab.
On one page I have two links, representing two 'products'. Clicking each link loads in via ajax a load of content for that product. This includes a new set of tabs and other data. Within one of the tabs there is a table that displays notes that have been added for the product, and within that table I can add a new row (ie a new note) to that table, and delete it if I want.

I am having a problem when adding notes to the table for one product then 'switching' to the next product. Whenever I do this I can add new notes to the table I have switched to but cannot delete them. I keep getting a javascript error 's is null'. I've tracked this down to this area of the code. I am using:
* File: jquery.dataTables.js
* Version: 1.7.5
[code]
from line 1607
/*
* Function: fnDeleteRow
* Purpose: Remove a row for the table
* Returns: array:aReturn - the row that was deleted
* Inputs: mixed:mTarget -
* int: - index of aoData to be deleted, or
* node(TR): - TR element you want to delete
* function:fnCallBack - callback function - default null
* bool:bRedraw - redraw the table or not - default true
*/
this.fnDeleteRow = function( mTarget, fnCallBack, bRedraw )
{
/* Find settings from table node */
var oSettings = _fnSettingsFromNode( this[_oExt.iApiIndex] );
var i, iAODataIndex;

iAODataIndex = (typeof mTarget == 'object') ?
_fnNodeToDataIndex(oSettings, mTarget) : mTarget;
[/code]

When var oSettings is being set it is always returning null. But only after the table has been switched.

There is no problem deleting or adding rows to the table for a single product it is only after I have switched to a different one and loaded in new tabs that there is a problem.

I am adding a row by using

[code]
/* Add row */
notesTbl.fnAddData( [....])
[/code]

and deleting a row using

[code]
/* Add event listener for the delete image */
$('#notes-table tbody td img.delete').live('click', function () {
// get the row node
var nTr = this.parentNode.parentNode;
notesTbl.fnDeleteRow(nTr);

} );
[/code]

Does what I'm seeing here point to anything obvious? Maybe to do with how the datatable settings objects are reinitialised? I feel it has something to do with the fact I am adding 'live' data toa table and recreating the same table with the ajax data.

Here is the code for the table as well:
[code]
notesTbl = $('#notes-table').dataTable({
"bDestroy":true,
"bPaginate": false,
"bLengthChange": false,
"bInfo": true, // display useful info in the footer
"bJQueryUI": true, // make use of the existing theme
"bAutoWidth": false, // false to optimise rendering, column size passed via aoColumns
} );
[/code]

All the datatable functions like filter/searching/sorting etc work absolutely fine.

Many thanks in advance for any help I get with this.

Euan