change the DOM place of the entire table

Roman_brodetski

Hello,
I've got two divs, and in one of them (or, maybe, in both) there is a DataTable.

User should be able to change the contents of the divs. Its implementation:
[code]
buf = zone1.html()
zone1.html(zone2.html())
zone2.html(buf)
[/code]
But when the contents changes, some code stops to work.
e.g. I'm using this code to enable selecting a row:
[code]
$(item.nTr).removeClass('row_selected') for item in $(dataTable.fnSettings().aoData)
[/code]
(it's coffescript, but it should be easy to understand=) )
this code stops to work after the exchange.

What else should I do to perform content exchange? Somwthing like DataTable.fnDraw?..

Thanks in advance,
best wishes,
Roman Brodetski

allan

Is that the jQuery html() function. What I suspect is happening is that you are ultimately using .innerHTML - which will break every reference to the nodes since you are taking a string copy of the HTML and then injecting it into the document, which creates new elements.

Therefore any references that DataTables has are still to the old table, not the new one (so in fact there is a memory leak here as well :-) ).

What you want to do is simply move the DOM elements, not copy them. To do this use appendChild (or $().append() if you are using jQuery for the manipulation).

Allan

Roman_brodetski

Allan, thank you much for such a quick answer.
I'll give it a try!

Roman_brodetski

worked like a charm!
Thanks!