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 on a page.
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 the datatable initalizer again with the specific search/sort options (bDestroy = true).

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):
view source
print?
1.nOrig.insertBefore(oSettings.nTable, oSettings.nTableReinsertBefore);

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.

Does anyone have any ideas for this strange issue?

Thanks,

Eamon

fbas

A common mistake that people fall into when popping up a window (this happened to me too) is that the content they are putting into the modal window is written as a complete page, and includes it's own jquery.. when loaded into a div on the same page this will clobber your original jquery object and the datatables (and other) plug-ins that were installed in the main page.

There are 2 solutions:
1) make sure not to include jquery in the "modal" page

or

2) load the "modal" page in an iframe to keep the main window namespaces separately and avoid the collision

ebauman

Unfortunately this is not the case - the data that is put into this modal is in a div generated by the page itself. It does not have a separate page / jQuery inclusion.
Thanks, though!