Broken page after adding buttons to my table (JQuery.extend falls in a infinite recursion)

leroych2

So my app is all happy, and this datatable is pretty nice and its editor works create, with bubbles.
Then I add the "require" to get datatable-select and datatable-buttons, and everything is ok.
Then finally I add "buttons: [ {extend: 'create', editor: simpleEditor} ] " to the definition of my datatable.

For some reason, in its initialization, the datatable-buttons module seem to use jQuery.extend on a data-structure that may be referring to itself (or a part of itself), which sends jQuery.extend into an infinite recursion until

Uncaught RangeError: Maximum call stack size exceeded
...

simpleEditor is built with new $.fn.dataTable.Editor( { ... } ).
and the buttons: [ {extend: 'create', editor: simpleEditor}] refers to it - so perhaps there is a weird self-reference loop happening.

but this seems to be exactly like every other datatable with button...

So, I am at a loss...

Has anyone encountered such conditions and found the root cause and fixed it?
I've upgraded to jQuery 1.12.4, latest datatable-select and datatable-buttons. I haven't upgraded Editor in a little more than a year.

thank you!

leroych2

The stack trace in the Chrome console refers to:

Function.jQuery.extend.jQuery.fn.extend

and the actual function is:

jQuery.extend = jQuery.fn.extend = function() {
(line 175 on jquery 1.12.4)

allan

I've not encountered that issue before I'm afraid. Could you link to a page showing the issue so I can help to debug it please?

Thanks,
Allan

leroych2

hi Allan,

thanks for trying to help.

Well, I think I've noticed the difference with all the other datatables / pages I've set-up.
I've set-up this big javascript object {
ajax: { type: 'POST', data: function(d){...}, dataSrc: ... },
lengthMenu: ...
order: ...
buttons:....
}

with buttons being [] at first.

then, for some reason I use lodash _.cloneDeep() to clone it, and then this gets passed to the $.dataTable( ) ...

So, if I remove the _.cloneDeep() step, the table works again.

When buttons: [ {extend:"create", editor: simpleEditor } ]

_.cloneDeep passes a structure that must be self-referencing which eventually leads $.extend to infinite recursion...
It is all my fault though.

conclusion: do NOT use _.cloneDeep on a structure that contains jQuery artefacts, if you plan to use this output to pass it back to jQuery functions...

thanks again !

christophe

PS: actually, I see also that I assemble the big configuration object using _.extend. This does not cause an issue when no elements are coming from jQuery....