jQuery modal breaking datatables?

ebauman

Hello all,

I'm having a very strange issue today, and I'm hoping you can help.
I have a datatable, initialized with the following code:

[code]
$('#inventoryListingTable').dataTable({
// aoColumns omitted
"fnRender": function (oObj) {
if (oObj.aData[14] != 'True' && oObj.aData[14] != 'False') {

return 'N/A';
}
else {
return oObj.aData[14];
}
}
},
{ "sClass": "status" },
{ "sClass": "purchaseDate" },
{ "sClass": "lastImaged",
"fnRender": function (oObj) {
if (oObj.aData[17] == '') {

return 'N/A';
}
else {
return oObj.aData[17];
}
}
},
{ "sClass": "deploymentDate",
"fnRender": function (oObj) {
if (oObj.aData[18] == '') {

return 'N/A';
}
else {
return oObj.aData[18];
}
}
},
{ "sClass": "warrantyDate",
"fnRender": function (oObj) {
if (oObj.aData[19] == '') {

return 'N/A';
}
else {
return oObj.aData[19];
}
}
},
{ "sClass": "editInventoryButtonCell", "sWidth": "6%", "bSortable": false },
{ "sClass": "viewMoreInventoryButtonCell", "sWidth": "6%", "bSortable": false }
],
"asStripClasses": ['', 'ui-state-default'],
"bAutoWidth": true,
"bFilter": false,
"bJQueryUI": true,
"iDisplayLength": 20,
"bProcessing": false,
"bStateSave": false,
"bSort": true,
"bSortClasses": false,
"bDestroy": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "./hardwareDBService.asmx/getInventoryGrid",
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('value', iDisplayIndex);

var editCell = $(nRow).find('.editInventoryButtonCell');
editCell.find('a').unbind().remove();
var editButton = $('Edit').unbind().button({
icons: { primary: 'ui-icon-pencil'}
}).click(function () {
ShowEditItem(this);
return false;
});
var viewMoreCell = $(nRow).find('.viewMoreInventoryButtonCell');
viewMoreCell.find('a').unbind().remove();
var viewMoreButton = $('View').unbind().button({
icons: { primary: 'ui-icon-zoomin'}
}).click(function () {
ShowViewMore(this);
return false;
});
editButton.appendTo(editCell);
viewMoreButton.appendTo(viewMoreCell);
return nRow;
},
// fnServerData omitted
}).show();
[/code]

Above this datatable, I have a div of search options, which does sorting and searching on the datatable.
In that search div, there is an 'update table' button which fires this datatable initalizer again with the specific search/sort options.

As you can see, two buttons are added to each row via fnRowCallback - 'Edit' and 'View'.
'Edit' fires a modal popup with a bunch of data in it.


When I push the Edit button and bring up the jQuery modal, and immediately afterwards try to search the datatable, the datatable breaks with the this error in Firebug:

Node was not found" code: "8

Which corresponds to this line in datatables within the fnDestroy function (1.8.0 full size):
[code]
nOrig.insertBefore(oSettings.nTable, oSettings.nTableReinsertBefore);
[/code]

This error/break does NOT occur if I don't bring up the edit modal.
Incidentally, the error also occurs if I simply CREATE the dialog in the DOM, but not display it, using autoOpen: false.

Sorry for the long length - I hope I gave you enough information to help me!

Thanks,

Eamon