"Cannot read property 'node' of undefined" JS error when destroying buttons

"Cannot read property 'node' of undefined" JS error when destroying buttons

DonDavioDonDavio Posts: 3Questions: 0Answers: 0

When I set up a new DataTable with buttons and then destroy it, I get a JavaScript error. There seems to be a loop in dataTables.buttons.js that removes nodes from the collection it is iterating over. When it gets to the halfway point (e.g. index = 3 for 6 buttons) then that index is no longer valid, because 3 buttons have already been removed from the buttons collection. Here's the simple example - http://live.datatables.net/nebuxani/4/edit

«1

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Darn - thanks for letting me know about this. I thought I had that fixed.

    I'll post back when I've committed a proper fix!

    Allan

  • DonDavioDonDavio Posts: 3Questions: 0Answers: 0

    Many thanks. For the time being I've worked around it by manually removing each button before calling destroy().

        var buttons = [];
    
        $.each(table.DataTable().buttons()[0].inst.s.buttons,
            function () {
                buttons.push(this);
            });
        $.each(buttons,
            function () {
                table.DataTable().buttons()[0].inst.remove(this.node);
            });
    
        table.DataTable().destroy();
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I've just committed the fix and the nightly version now has the change in it. Could you try it and let me know how it goes for you (it should be plain sailing!).

    When confirmed I'll release 1.2.1 with just that change.

    Thanks,
    Allan

  • DonDavioDonDavio Posts: 3Questions: 0Answers: 0

    Yes that did the trick. Thanks for the quick fix.

  • jgoalbyjgoalby Posts: 1Questions: 0Answers: 0

    Wow! Just discovered this issue in my application as well and came here searching for the error. I also downloaded the nightly version and it fixed it for me. Thanks for the quick fix!!

  • RandomVariableRandomVariable Posts: 1Questions: 0Answers: 0

    Ran into the same issue and can confirm that this fix works. Thanks for the quick fix, when will 1.2.1 be released?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Within the next few hours :-). I'll post back here when done.

    Allan

  • edinchevedinchev Posts: 1Questions: 0Answers: 0
    edited May 2016

    Awesome! Waiting for the latest release. I had the buttons not being re-created on destroy and then the above error when updating to the latest version. Thanks for the quick fix!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Released now and available in the download builder and NPM.

    Thanks for the feedback on this issue!

    Allan

  • mistakevinmistakevin Posts: 3Questions: 1Answers: 0
    edited May 2016

    Oops, see now it's in the buttons package. Thanks for the quick fix!

  • jgessingerjgessinger Posts: 38Questions: 6Answers: 0

    I still have the problem but on another line of code as your fix. I get the error on line 178 whenever I try to call dt.destroy() in a button action. But this error just occurs when I additionally have a button with the property "extend: 'edit'" or "extend: 'remove'". (with 'create' I dont get this error)
    So when I comment the "extend: 'edit'" button out, the error is gone. Is there a problem with the editor plugin and 'edit/remove' button type?

    It would be great if you could check this.

    Here is the output of my Chrome console:
    https://postimg.org/image/jf5zu2dk7/

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    It would be great if you could check this.

    Delighted to. Can you give me a link to the page so I can check it out and debug it.

    One thing worth trying is to use the nightly versions of Buttons and Select. I committed a couple of changes earlier today which could address this, depending on exactly what is happening on the page.

    Thanks,
    Allan

  • jgessingerjgessinger Posts: 38Questions: 6Answers: 0

    Thank you again for your fast help Allan! The problem seems to be caused by the 'select' plugin. When I take the nightly select 1.2.0 the error is gone. But when I take the release select 1.2.0 I get this error. So there are changes and you forgot to rename the nightly version to 1.2.1-dev? I first thought its the same version. Thanks!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    So there are changes and you forgot to rename the nightly version to 1.2.1-dev?

    Yup - sorry! Committed now.

    Allan

  • Darshan_ShahDarshan_Shah Posts: 2Questions: 1Answers: 0

    I am using html buttons for exporting. Now I can successfully export in csv format but when I try to export in PDF/Excel format it gives me Cannot read property 'node' of undefined in dataTable.buttons.min.js file. How do I resolve it?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    How do I resolve it?

    Please post a link to a test case showing the issue.

    Allan

  • sgermosensgermosen Posts: 1Questions: 0Answers: 0

    i have the 1.10 version and have the same issue, i solved using the answer of DonDavio, but if there another way, please let me know

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    What are the specific versions you are using? You can use the debugger to check. There was an issue with old versions, but it should be resolved now. If not, please link to a test case showing the issue.

    Allan

  • DelirioxDeliriox Posts: 2Questions: 0Answers: 0

    Hi Allan, good morning. I have the same issue, i tried to use the latest version (datatableButtons 1.4.0) and the bug still appears also i tried to use the 1.2 version and didnt work. should i do anything else?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you tell me how to reproduce that error so I can get it fixed please? I've just tried running:

    $('#example').DataTable().buttons().destroy()
    

    on this page and it seems to work okay.

    Allan

  • DelirioxDeliriox Posts: 2Questions: 0Answers: 0

    I tried to clear and destroy the datatable whe someone click on "Download data" button, when the button is clicked, a service ir requested and the table is drawed with the new information, after, the data is exported to excel file
    (here occurs the node error)
    text: 'Download data',

                        extend: 'excelHtml5',
                        exportExtension: 'Excel',
                        exportOptions: {
                            columns: [9, 1, 2, 3, 4, 5, 8, 10, 11]
                        },
    
                        action: function (e, dt, node, config) {
                            var self = this;
                            var oTable = $('#PurchasesTable').dataTable();
                            var erase = oTable.fnClearTable();
                            var clear = oTable.fnDestroy();
    
    
                            $scope.getOrderItem(function()                                                          
                            {
    
                               var cr= oTable.fnDraw();
    
                               $.fn.DataTable.ext.buttons.excelHtml5.action.call(self, e, dt, node, config);
                               oTable.buttons('2-1').trigger();
    
    
                            });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I'm not clear on how to reproduce the error from that. Perhaps you can link to a test case showing the issue?

    Allan

  • fabianmunozagfabianmunozag Posts: 2Questions: 0Answers: 0

    Hi Allan,

    Thank you for this awesome plugin.
    I recently have the same issue when trying to destroy the table and its buttons.

    In my scenario I have the following:
    datatables 1.10.16
    nightly buttons
    nightly select
    responsive 2.2.1

    I need to destroy the table and buttons every time the user changes the filtering value and the data changes. I'm running the below code but still getting the "Cannot read property 'node' of undefined." I tried changing the option select: 'single' to select: true but had no desired result.

    $('#tblrecords').DataTable().buttons().destroy();
    $('#tblrecords').DataTable().destroy();
    $('#tblrecords').DataTable({
    ajax: {
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Personas')/items?$select=ID,Title,Nombres,Paterno,Materno,Identificacion,Attachments,AttachmentFiles&$expand=AttachmentFiles&$top=5000&$filter=substringof('" + filtroPersona + "', Nombres) or substringof('" + filtroPersona + "', Paterno)",
    type: "GET",
    dataType: "json",
    dataSrc: 'd.results',
    headers: {'Accept' : 'application/json;odata=verbose'}
    },
    scrollCollapse: true,
    processing: true,
    rowId: 'ID',
    dom: 'Blfrtip',
    select: true,
    columns: [
    { data: null, className: 'details-control', defaultContent: '', orderable: false, render: function () { return '<i class="fa fa-plus-square" aria-hidden="true"></i>';}, width:'15px'},
    { data: "ID" },
    { data: null, render: function (data, type, row) {
    return data.Paterno + " " + data.Materno + ", " + data.Nombres;
    }},
    { data: "Identificacion" },
    { data: "Title" }
    ],
    buttons: [{text: 'New', action: function() { } },{text: 'Edit', action: function() { },enabled:false }]

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you link to a page showing the issue so I can take a look at it please? You shouldn't need to use .buttons().destroy(); before calling destroy(). That should be done automatically.

    Allan

  • dynasoftdynasoft Posts: 422Questions: 67Answers: 3
    edited February 2020

    Hi

    I also get this error. I use v1.9.2 of editor. I have added select: true in DT code, and $('#tblDataTable').DataTable().buttons().destroy(); and $('#tblDataTable').DataTable().destroy();

    I get the error when selecting a row after reloading the DT via code:

    var dataTable = $('#tblDataTable').DataTable( {
    ...
    }

    Please advise.

  • dynasoftdynasoft Posts: 422Questions: 67Answers: 3

    I use Buttons for DataTables 1.6.1 and the following:

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not following, sorry - I tried to reproduce here with no joy. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • dynasoftdynasoft Posts: 422Questions: 67Answers: 3

    Thanks. That was useful.

  • dynasoftdynasoft Posts: 422Questions: 67Answers: 3
    edited February 2020

    Hi again

    I'm using actually a custom editor button. Once I reload the DT using it, and select a row for editing, the fields disappear on the form. I tried looking for a cause and if I comment out the part for "template: '#EditorForm'," from the DT code, the fields show again. What is causing the fields to not show with a custom form template?

    Issue:

    DT code:

            var editor = new $.fn.dataTable.Editor({
    
                destroy: true,
                ajax: {
                    url: '/CustomerSQNs/CRUDCustomerSQNs/',
                    data: function ( d ) {
                        return $.extend( {}, d, {
                            intContTpe: intContTpe1,
                            lngContIdx: lngContIdx1,
                            strContNbr: strContNbr1,
                            intSNTpe: fromSearch == true ? intSNTpeShow1 : intSNTpe1,
                            lngSNIdx: lngSNIdx1
                        } );
                    },
                    type: 'POST',
                    async: true,
                    cache: false
                },
                table: '#tblDataTable1',
                template: '#EditorForm',
                fields: [
                    {
                        label: '',
                        name: 'Qwert.id'
                    }
                    ....
                ]
            });
    

    Form template:

    <div id="EditorForm">
        <editor-field name="Qwert.ActivatedOrNot"></editor-field>
        <editor-field name="Qwert.DDIFormatType"></editor-field>
        <editor-field name="Qwert.CLI"></editor-field>
        <editor-field name="Qwert.RangeExcludedNumbers"></editor-field>
        <editor-field name="Qwert.RegionalDiallingCode"></editor-field>
        <editor-field name="Qwert.NationalDiallingCode"></editor-field>
        <editor-field name="Qwert.PriceListActivDate"></editor-field>
        <editor-field name="Qwert.PriceListDeactivDate"></editor-field>
        <editor-field name="Qwert.DptBranchName"></editor-field>
        <editor-field name="Qwert.PlanServDiscount"></editor-field>
        <div class="panel panel-default scrollable" id="divVoDaCDRFormatsTable" style="height:200px">
            <fieldset class="QwertCDRFormats[].id">
                <legend>@(lblo.lblVoiceData)</legend>
                <editor-field name="QwertCDRFormats[].id"></editor-field>
                <editor-field name="QwertPriceLists0[].id"></editor-field>
                <editor-field name="QwertPriceLists1[].id"></editor-field>
            </fieldset>
        </div>
        <div class="panel panel-default scrollable" id="divSeCDRFormatsTable" style="height:200px">
            <fieldset class="HytgtCDRFormats[].id">
                <legend>@(lblo.lblService)</legend>
                <editor-field name="HytgtCDRFormats[].id"></editor-field>
                <editor-field name="HytgtPriceLists0[].id"></editor-field>
                <editor-field name="HytgtPriceLists1[].id"></editor-field>
            </fieldset>
        </div>
    </div>
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I've not seen that before, and your code looks fine. Would you be able to update my example in my last comment to demonstrate the problem, please, of link to your page instead?

    Colin

This discussion has been closed.