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)

leroych2leroych2 Posts: 3Questions: 1Answers: 0
edited December 2017 in Buttons

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 :smile:

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

  • leroych2leroych2 Posts: 3Questions: 1Answers: 0
    edited December 2017

    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)

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • leroych2leroych2 Posts: 3Questions: 1Answers: 0
    edited December 2017

    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....

This discussion has been closed.