Datatables Editor only works once on the table

pape04

Hello,
I am having the problem above, I am reading & searching for days now to find the solution, but no luck yet.
The problem is the following:
I am loading my table, then I add a new editor instance. Then editing only works once.

My datatable configuration is the following:

    $('#datatable-orders').dataTable({
                                    aaSorting: [
                                        [2, 'desc']
                                    ],
                                    scroller: true,
                                    scrollY: self.datatableLength,
                                    deferRender:    true,
                                    scrollCollapse: false,
                                    bDeferRender: true,
                                    bLengthChange: false,
                                    data: orders,
                                    select: {
                                        style: 'multi',
                                        selector: 'td:first-child'
                                    },
                                    search: {
                                        regex: true
                                    },
                                    fnCreatedRow: function (nRow, aData) {
                                        $(nRow).attr('id', tableOrders.substring(1) + aData.orderid);
                                    },
                                    initComplete: function() {
                                        new $.fn.dataTable.Buttons( $(this).dataTable(), {
                                            buttons: [
                                                {
                                                    attr: {
                                                        id:'printOrdersButton'
                                                    },
                                                    text: '<i class="fa fa-fw fa-print"></i>',
                                                    extend: 'print',
                                                    className: 'btn btn-default btn-primary',
                                                    exportOptions: {
                                                        columns: [ 2,3,4,5,6,7,8,9,10,11,12,13,14,15 ]
                                                    }
                                                }
                                            ]
                                        } );
    
                                        $(this).DataTable().buttons().container().appendTo( '#datatablePrintButton' );
                                    },
                                    columns: [
                                        { "data": 'orderid' },
                                        { "data": 'orderid' },
                                        { "data": 'orderid' },
                                        { "data": 'customerid' },
                                        { "data": 'customerpo', "className": 'editable' },
                                        { "data": 'temptotal' },
                                        { "data": 'credithold' },
                                        { "data": 'deliveryaddressid' },
                                        { "data": 'artworkmethod' },
                                        { "data": 'orderdate' },
                                        { "data": 'paydate' },
                                        { "data": 'agreeddate' },
                                        { "data": 'targetdate' },
                                        { "data": 'status.statusname' },
                                        { "data": 'po' },
                                        { "data": 'operationalrole.name' }
                                    ]
                                };

Then my editor:

                                                    var editor = new $.fn.dataTable.Editor( {
                                                                    ajax: function ( method, url, data ) {
                                                                        var sendData = company.flattenObject(data.data);
                                                                        sendData.orderid = data.id;
                                                    
                                                                        $.ajax( {
                                                                            type: 'POST',
                                                                            url:  '/orders',
                                                                            data: sendData,
                                                                            beforeSend: function() {
                                                                                $.blockUI({
                                                                                    message : '<i class="fa fa-spinner fa-spin"></i> Updating Order...'
                                                                                });
                                                                            },
                                                                            success: function () {
                                                                                $.unblockUI();
                                                                            },
                                                                            error: function () {
                                                                                company.connectionError();
                                                                            }
                                                                        } );
                                                                    },
                                                                    legacyAjax: true,
                                                                    table: '#datatable-orders',
                                                                    idSrc:  'orderid',
                                                                    fields: [{
                                                                        name: "customerpo"
                                                                    }, 
                                                                    ]
                                                                });
                                                    
                                                                $('#datatable-orders').on( 'click', 'td.editable', function (e) {
                                                                    console.log( $('#datatable-orders').DataTable().cell( this ).index() );
                                                                    editor.inline( $('#datatable-orders').DataTable().cell( this ).index(),{
                                                                        submit : 'changed',
                                                    
                                                                        onBlur:        'close',
                                                                        onComplete:    'close',
                                                                        onEsc:         'close',
                                                                        onReturn:      'submit',
                                                                        drawType:      false,
                                                                        scope:         'cell'
                                                                    });
                                                                } );

After each ajax POST, I am using websockets to update the table, the socket returns a JSON object, which I am passing to this function: self.updateDataTable('#datatable-orders', data, data.orderid);
which basically does the following:
dataTable.fnUpdate(data,dataTable.api().row(datatable+id),null,false);

Editing only works once. The second time it doesn't show and if I am clicking on another rows the last character of the edited field is disappearing. Has anyone had the same problem? What would be the solution? Thank you

EDIT: Updated post with Markdown code syntax highlighting.

pape04

I have to correct this: " if I am clicking on another rows the last character of the edited field is disappearing"
To this: if I am clicking on another rows the edited field reverts back to the original data in the html cell, but when I am getting the row data it is correct.

allan

You aren't calling the success callback of the ajax option, when used as a function. In fact, it isn't listed in your function parameters. You must call that method with the JSON data that Editor expects, otherwise Editor doesn't know that the server has completed the request!

Allan

pape04

Thank you Allan. It works now, it wasn't obvious to me that the success callback has to be there, even if I won't use it for anything.