insertBefore may fail using the AngularWay

[nicoabie]

It seems that sometimes its second param (settings.nTableReinsertBefore the datatables loading message) is not yet inserted in the DOM
Throwing "Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

I couldn't found the cause of it to happen, but a "fix" I've found was

try {
    orig.insertBefore(table, settings.nTableReinsertBefore);    
}catch(ex){
    console.log(ex);
    orig.appendChild(table);
}

To force its replication, render a table using the angularway, remove from dom the loading message and render it again.

[l-lin]

Mmh can you provide a code (preferably a plnkr, fiddle or something alike) that can reproduce the problem?

[nicoabie]

I will try to put a fiddle, but you will have to remove manually the loading message to replicate it. It fails sometimes if not.

[hyades]

Any updates? Adding this way seems to remove the handlers attached to some of the elements of my table.

[l-lin]

Can you provide an example that reproduces your problem? Because I do not have this issue.

[noteStylet]

I have the same Problem.
The problem is when you have multiple tabs that contains angular-datatables.
And when a new data arrives, the error is throwed as many times we have tabs.

I am using bootstrap tabs,
and if I have a 5 tabs, when a new data arrives, the error is thrown 5 times.

So I understand that he will modify the DOM, but the DOM dosn't exist because we can show 1 tab a time.

[l-lin]

Using Angular Bootstrap, I do not have this issue.
I don't know about using only Bootstrap though...

[zafra6]

Hey guys, maybe we can use an if-else validation instead of a try-catch validation. I'm working with multiple AngularWay datatables, so sometimes in console appears this exception (DOMException), that made think that something is wrong when actually is not. Besides I think it'll improve the performance

if(orig.contains(settings.nTableReinsertBefore)){
     orig.insertBefore(table, settings.nTableReinsertBefore);
} else {
     orig.appendChild(table);
}

[SeoRoman]

Also, I am using angular bootstrap, using tabset and tab and also having the same issue as mentioned above.

issue...

table datatable="ng" // primary,

click on edit (opened modal, with angular tabs) one of the tabs has another datatable = "ng" and the Node error pops up...

Using Zafra6's solution has resolved the issue :)

[geeklisted]

Interestingly, I am not using tabs (bootstrap or otherwise) but I am using static dataTables and am encountering this issue. I modified angular-datatables.js with zafra6's suggestion and the exception is actually being thrown to the console.

I wonder if just removing the log.warn(ex) from the original try-catch is a better solution for now.