Error with editor.submit()

fabioberetta

Hello,

I am evaluation the editor and I am trying to edit via API a record but I get an error "Uncaught TypeError: Cannot read property 'name' of undefined" when submitting with .submit() method.

I get the error only if I start the editor with .edit(this, false).

If I use .inline(this), it works. Can anyone help?

ty
f

This is the code.

  var editor; // use a global for the submit and return data rendering in the example   
  var table;
    
    $(document).ready(function() {
        

         editor = new $.fn.dataTable.Editor( {
        ajax: "server_processes/manage_sections.php",
        table: "#sections",
        fields: [ {
                label: "Section Name",
                name: "name"
            }, {
                label: "Color",
                name: "color"
            }  
        ]
    } );
    
        // Activate an inline edit on click of a table cell
    $('#sections').on( 'click', 'tbody td:not(:first-child):not(:last-child)', function (e) {
        editor.inline( this );
    } );
    
    $('#sections').on( 'click', 'tbody td:last-child', function (e) {
        
        
        
        var cellRef = table.cell( this ).data();
        var cellIdx = table.cell( this ).index();

        editor.edit( this , false );
        editor.set('color', "#aaaaaa");
        //var colore = editor.val('color');
        cellRef = table.cell( this ).data();
        editor.submit();

            
        //editor.inline( this );
    } );
                
        table = $('#sections').DataTable({
        dom: "Tfrtip",
        ajax: "server_processes/manage_sections.php",
        "aLengthMenu": [[5, 10, 25], [5, 10, 25]],
        "pageLength": 5,
        columns: [
            { data: null, defaultContent: '', orderable: false, width: "10%" },
            { data: "name" },
            { data: null, render: function ( data, type, full ) {
                                return '<button class="btn btn-default" id="' + data.id + '" style="background-color:' + data.color +'">Change</button>';
                            }, orderable: false, editField: "color", width: "20%" }
        ],
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "single",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
               
    } ); // End of DataTable
    
    
        
    });

fabioberetta

I just realised that I was incorrectly selecting the rows.

This way it worked.

 $('#sections').on( 'click', 'tbody td:last-child', function (e) {
                
        colorEditor
            .edit( table.row($(this).parent()).node() , false )
            .set('color', "#bbbbbb")
            .submit();
            
    } );

ty
f

allan

Hi,

That looks spot on to me. Thanks for posting back :-)

Allan