Need to get success or error message, then reload data table with changed values

djustus

Hey,
Im making a data tables with inline editing. Whenever i change a value, it makes a ajax call to the correct location, sets the value with this suitlet, which succeeds on my end, then datatables keeps giving me the error "Uncaught TypeError: Cannot read property 'length' of undefined" in console, on line 313 of f._submitSuccess .

Currently my code is defined as such. How can i get the data table to make the change, then reflect the change in the data table so i can continue editing other values without having to refresh the page.

/***
 * Client side script to process Datatable for Payment Schedule
 * main is created with possibility of exposing functions but nothing is exposed right now except round
 * @context : pSchedule
 */
; //in case of namespace pollution, close any open client side script.
/**
 * Important to pass jQuery
 * @param $
 * @param pSchedule
 * @param window
 * @param document
 * @param undefined
 */

var mainSsu = '/app/site/hosting/scriptlet.nl?script=customscript_mof_ssu_multilineediting&deploy=customdeploy_mof_ssu_multilineediting&columns=';
//(document).ready
$(function() {
    //  var suiteletTable = $('#ps_mainsuitelet').DataTable();
    var recordId = $('#recordid').val();
    var recordType = $('#recordtype').val();
    var columns = $('#columns').val();
    console.log(columns);
    var columnslabels = $('#columnlabels').val();
    console.log(recordId + ' ' + recordType + ' ' + columnslabels);
    var headers = '';
    columnHeadersArray = columnslabels.split(',');

    $('#ps_mainsuitelet thead tr').append('<th>LineId</th>');
    for (var i = 0; i < columnHeadersArray.length; i++) {
        $('#ps_mainsuitelet thead tr').append('<th>' + columnHeadersArray[i] + '</th>');
    }

    //  var url = mainSsu + '&recordInternalId=' + recordId + '&recordType=' + recordType + '&actiontype=setValues';
    jQuery.get(mainSsu + encodeURIComponent(columns) + '&recordInternalId=' + recordId + '&recordType=' + recordType, {
        actiontype : 'setValues'

    }).done(function(data) {
        console.log(data);
        createMainDataTable(data);

    });

    var mainSuiteletTable, editor;

    function createMainDataTable(data) {

        var fields = [{name : 'empty'}, {name : 'checkbox'}], columns = [{data : 'empty'}, {data : 'checkbox'}];
        var colsArray = JSON.parse($('#columnsObj').html());
        for (var i = 0; i < colsArray.length; i++) {
            fields.push({
                name : colsArray[i].id,
                label : colsArray[i].label
            });

            columns.push({
                data : colsArray[i].id
            });
        }

        editor = new $.fn.dataTable.Editor({
            table : "#ps_mainsuitelet",
            fields : fields,
            idSrc : 'line',
            ajax: function ( method, url, data, success, error ) {
              var line = Object.keys(data.data).join();
              var fieldId = Object.keys(data.data[line]).join();
              var value = Object.values(data.data[line]).join();
              var sm = {
                    "recordtype" : "salesorder",
                    "internalid" : "1393981",
                    "line": line,
                    "fieldid" : fieldId,
                    "value": value
              };
              console.log("JSON" +  JSON.stringify(sm));
              $.ajax({
           type: "GET",
            url:  "/app/site/hosting/scriptlet.nl?script=926&deploy=1"+ '&recordtype=' + "salesorder" + '&internalid=' + "1393981" + '&line=' + line + '&fieldid=' + fieldId+ '&value=' + value,
            data: data,
            success: function () {
                success("Success");
            },
            error: function (xhr, error2, thrown) {
                error(xhr, error, thrown);
            }
          }
        );
            }});     

        mainSuiteletTable = $('#ps_mainsuitelet').DataTable({
            data : JSON.parse(data),

            dom : 'Bfrtip',

            buttons : [{
                extend : 'create',
                editor : editor
            }, {
                extend : 'edit',
                editor : editor
            }, {
                extend : 'remove',
                editor : editor
            }],

            columns : columns,

            fixedHeader : {
                header : true
            },
            paging : false,

            select : {
                style : 'os',
                selector : 'td:first-child'
            },

            columnDefs : [{
                className : 'select-checkbox',
                targets : 0

            }, {
                className : 'select-checkbox',
                targets : [1],
                visible : false,
                searchable : false
            }]
        });
    }

    // Activate an inline edit on click of a table cell
    $('#ps_mainsuitelet').on('click', 'tbody td:not(:first-child)', function(e) {
        editor.inline( this, {
            buttons: { label: '&gt;', fn: function () {
                var cell = mainSuiteletTable.cell(this);
                this.submit(); } }
        } );
    });


    var selected = [];
    $('#checkboxes input:checked').each(function() {
        selected.push($(this).attr('name'));
    });

});

allan

Hi,

The problem is this:

success("Success");

Editor expects JSON to be given to the success callback rather than a string. The exact format that it expects is documented here. Basically it just needs to include the data for the modified row.

Regards,
Allan

edited fixed link

djustus

Your answer leads to a page that doesnt exist. Care to clarify?

djustus

Also, possible to answer the question: How can i return the success message then reload the data table with the changed values . Doesnt seem to show the change on screen unless i refresh the data table.

kthorngren

I think the doc Allan was pointing you to is this:
https://editor.datatables.net/manual/server

Kevin

allan

My apologies - Kevin is spot on as usual. I've corrected the link in my post.

How can i return the success message then reload the data table with the changed values

That's the key part here. If you return the data to the success callback in the format Editor is expecting, then that will happen automatically like in the examples.

Allan