Cannot read property 'column' of undefined

smileywar

I randomly get this error, when i'm editing inline using serverside true

When I disable it, I don't have that issue. This is very random so I can't find out what the issue is.

When serverside true is removed, I don't get that problem.

Any reason to this?

<table id="products" class="display" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Image</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Availability</th>
                                        <th>Price</th>
                                        <th>Shipping Price</th>
                                        <th>Edit / Delete</th>
                                        <th>Checkbox</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>ID</th>
                                        <th>Image</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Availability</th>
                                        <th>Price</th>
                                        <th>Shipping Price</th>
                                        <th>Edit / Delete</th>
                                        <th>Checkbox</th>
                                    </tr>
                                </tfoot>
                            </table>

editor = new $.fn.DataTable.Editor( {
    ajax: "sw/load/ld-edit-table.php",
    table: "#products",
    fields: [ 
        {
            label: "ID:",
            name: "sw_gm_feed.gm_id",
            type: "readonly"
        }, {
            label: "Title:",
            type:  "textarea",
            name: "sw_gm_feed.title"
        }, {
            label: "Description:",
            type:  "textarea",
            name: "sw_gm_feed.description"
        }, {
            label: "Availability:",
            name: "sw_gm_feed.availability",
            type: "select",
            options: [
                 { label: "In Stock", value: "in stock" },
                 { label: "Out of Stock", value: "out of stock" }
            ]
        }, {
            label: "Price:",
            name: "sw_gm_prices.price"
        }, {
            label: "Shipping Price:",
            name: "sw_gm_shipping_prices.shipping_price"
        }
    ]
} );

editor
    .on( 'open', function ( e, type ) {
        if ( type === 'inline' ) {
            // Listen for a tab key event when inline editing
            $(document).on( 'keydown.editor', function ( e ) {
                if ( e.keyCode === 9 ) {
                    e.preventDefault();

                    // Find the cell that is currently being edited
                    var cell = $('div.DTE').parent();

                    if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                        // One cell to the left (skipping the first column)
                        cell.prev().click();
                    }
                    else if ( e.shiftKey ) {
                        // Up to the previous row
                        cell.parent().prev().children().last(0).click();
                    }
                    else if ( cell.next().length ) {
                        // One cell to the right
                        cell.next().click();
                    }
                    else {
                        // Down to the next row
                        cell.parent().next().children().eq(1).click();
                    }
                }
            } );
        }
    } )
    .on( 'close', function () {
        $(document).off( 'keydown.editor' );
    } );

$('#products').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this, {
        submitOnBlur: true
    } );
} );

$('#products').dataTable( {
    dom: "Tfrtip",
    ajax: {
        url: "sw/load/ld-edit-table.php",
        type: 'POST'
    },
    serverSide: true,
    stateSave: true,
    columns: [
        { data: "sw_gm_feed.gm_id", "class":"gm_id" },
        {
            "bSearchable": false,
            "orderable": false,
            "class":"thumb-loading",
            "targets": 0,
            "data": "sw_gm_feed.image",
            "render": function ( data, type, full, meta ) {
              return '<img class="thumb" src="'+data+'">';
            }
          },
        { data: "sw_gm_feed.title" },
        { data: "sw_gm_feed.description" },
        { data: "sw_gm_feed.availability" },
        { data: "sw_gm_prices.price" },
        { data: "sw_gm_shipping_prices.shipping_price" },
        {
            bSearchable: false,
            orderable: false,
            data: null,
            defaultContent: '<button type="button" class="btn btn-primary edit"><i class="fa fa-pencil"></i></button> <button type="button" class="btn btn-secondary delete"><i class="fa fa-trash-o"></i></button>',
            width: '100px'
        },
    {
            bSearchable: false,
            orderable: false,
            data: null,
            defaultContent: '<input type="checkbox" class="selected" />',
            width: '50px'
        }
    ],
    tableTools: {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_edit",  sButtonText: "Quick Editing", editor: editor }
        ]
    }
} );

smileywar

And I'm using submitOnBlur: true

And the full error is

dataTables.editor.min.js?v=1.564:70 Uncaught TypeError: Cannot read property 'column' of undefined

smileywar

Hi so nobody knows about this issue?

I have created a test section, if anybody could help me. This APP is useless to me if I can't fix this problem.

In chrome when you click around randomly to edit it after maybe 10 or 15 clicks, it will stop working.

http://work.smileywar.com/fa-gm-feed-update-test/admin/product-edit.php
login: admin
pass: admin1234

Help would be much appreciated. Kind regards, Emmanuel

allan

Hi Emmanuel,

I've just tried clicking around your table, but haven't been able to reproduce the issue.

However, I notice that you are using inline editing with tabbing and server-side processing. Do you really need server-side processing? You should only need it if there are 50'000+ rows.

Allan

smileywar

Hello Allen, thanks for the reply.

It depends on each of my customers, but have noticed that it becomes slow when loading more than 10k products.

Due to server requirements, so for example PHP needs 128M Memory to process 10k rows when server-side processing is enable the memory is not of an issue. I can than load 30k+

So in short, I really need server-side processing. Currently I have disabled inline editing, but as I bought a license for the editor I was hoping I could use the functions.

Otherwise I might of simple used the basic datatables.

I know you don't give full support, but is there something wrong on how I have implemented the coding?

The error happens also on inline editing when update on click. so it's not only on blur.

Could you give me a hint as to how to find out what the problem is?

I have loaded 9k products, maybe it happens when there are lots of products, but it happened again.

Could you have another look please?

Here is a screenshot of the error
http://postimg.org/image/5awtss1xz/

Thanks in advance, kind regards, Emmanuel.

allan

Thanks for the explanation. Its just that I see server-side processing introducing complications so often for tables with just a handful of rows!

What stands out most for me is how inline() is called. Currently you are passing in this which is the cell that was clicked on. However, when you have server-side processing enabled and submitOnBlur enabled, every time the inline form is closed the DataTables is going to to a redraw.

The result is that this (the cell that the tab control code has referred to) will likely no longer exist.

The way to address this is not to pass the node into inline() but rather to use row().index(). For example:

    $('#products').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( table.row( this ).index(), {
            submitOnBlur: true
        } );
    } );

You need to update $('#products').DataTable( { to be:

var table = $('#products').DataTable( {

so there is a reference to the DataTables API so you can use row().index().

This should work because the index will still be correct after the redraw and inline() will happily accept a row index.

If that doesn't help, could you give me further details on how I can reproduce the error.

Thanks,
Allan

smileywar

Thank you for the detailed reply, I will edit this next week. And see how it works.

Thanks for the reply.

smileywar

This method provides an invalid index, returns undefined.

smileywar

I have decided to build my own, as this is just not what I'm looking for. The key feature I wanted from the editor which is not working in my current development.

Am I eligible for a refund and if so what is the procedure.

Kind regards, Emmanuel.

allan

Hi,

If you could drop me an e-mail - allan@ {this domain.net} - I'll sort that out for you.

Thanks,
Allan

smileywar

HI Allan, thank you for the time and effort you have provided. This as mentioned before is a great Application and would recommend other people to use, just in my current development requirements it's not suitable.

Thanks, Emmanuel.

maheshb

Hi, Allan even I am facing the same issue with server side procesing. I tried above solution but got the same error undefined index. Thanks

allan

@maheshb - Can you link to a test case showing the issue please so I can debug it.

Allan

maheshb

@allan - Hi, Allan the issue is when I clicked on the inline editable column and if I click anywhere except the column cells which are editable will work fine but when I clicked on editable column cells that undefined error occur. I have only 1 inline editable column and I too have used that tabbing and submit on blur functionality just like smileywar. Hopes this helps you to debug

allan

Could you link to the page so I can inspect the code and see what is going wrong please?

Allan

maheshb

@allan Sure will do that soon

maheshb

@allan, I have dropped an email on (retracted to try and prevent spam) with code.

allan

Thank you.

The issue here is that you have server-side processing enabled - the the click function is activated it was passing this into inline(), which is fine for client-side processing since the node remains available after a table redraw. However, for server-side processing that is not the case, so you need to pass the cell index in:

$('#example').on('click', 'tbody tr td:nth-child(6)', function(e) {
    var idx = oTable.cell(this).index();
    editor.inline(idx, {
        submitOnBlur: true
    });
});

Allan

maheshb

@allan Thanks its working :)