Broken page after adding buttons to my table (JQuery.extend falls in a infinite recursion)
Broken page after adding buttons to my table (JQuery.extend falls in a infinite recursion)
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!
Answers
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)
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
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....