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

DonDavio

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

allan

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

DonDavio

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();

allan

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

DonDavio

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

jgoalby

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

RandomVariable

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

allan

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

Allan

edinchev

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!

allan

Released now and available in the download builder and NPM.

Thanks for the feedback on this issue!

Allan

mistakevin

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

jgessinger

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/

allan

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

jgessinger

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!

allan

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

Yup - sorry! Committed now.

Allan

Darshan_Shah

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?

allan

How do I resolve it?

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

Allan

sgermosen

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

allan

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

Deliriox

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?

allan

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

Deliriox

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();


                        });

allan

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

Allan

fabianmunozag

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 }]

allan

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

dynasoft

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.

dynasoft

I use Buttons for DataTables 1.6.1 and the following:

colin

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

dynasoft

Thanks. That was useful.

dynasoft

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>

colin

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