Unable To Delete New Added Rows

Nwilliams8162

Here is my code below. The issue I have is whenever you click on Add New Row button or Copy button on the line it creates the new row correctly. However, whenever I try and delete these new rows created I get the following error:

"Uncaught Unable to automatically determine field from source. Please specify the field name."

    var dataSet = 
    [
        {
          "DT_RowId": "row_1",
          "first_name": "Tiger",
          "last_name": "Nixon",
          "position": "System Architect",
          "office": "Edinburgh",
          "start_date": "2011-04-25",
          "salary": "320800"
        },
        {
          "DT_RowId": "row_2",
          "first_name": "Garrett",
          "last_name": "Winters",
          "position": "Accountant",
          "office": "Tokyo",
          "start_date": "2011-07-25",
          "salary": "170750"
        },
        {
          "DT_RowId": "row_3",
          "first_name": "Ashton",
          "last_name": "Cox",
          "position": "Junior Technical Author",
          "office": "San Francisco",
          "start_date": "2009-01-12",
          "salary": "86000"
        },
        {
          "DT_RowId": "row_4",
          "first_name": "Cedric",
          "last_name": "Kelly",
          "position": "Senior Javascript Developer",
          "office": "Edinburgh",
          "start_date": "2012-03-29",
          "salary": "433060"
        }
    ];

     var editor;
    editor = new $.fn.dataTable.Editor( {
        data: dataSet,
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    } );
      var table = jQuery('#example').DataTable( {
            data: dataSet,
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: "first_name" },
                { data: "last_name" },
                { data: "position" },
                { data: "office" },
                { data: "start_date" },
                { data: "salary"},
                {
                    data: null,
                    className: "center",
                    defaultContent: '<a href="" class="copy-row-test">COPY</a> | <a href="" class="editor_remove">Delete</a>'
                }
            ],
            keys: {
                columns: ':not(:first-child)',
                keys: [ 9 ],
                editOnFocus: true,
                editor: editor
            },
            select: {
                style:    'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );

        var rowCount = dataSet.length;
        
        jQuery('a.editor_remove').on( 'click', function (e) {
            e.preventDefault();
            table
                .row(jQuery(this).parents('tr'))
                .remove()
                .draw();
            rowCount = rowCount == 1 ? 0 : rowCount - 1;
        } );

        jQuery('.copy-row-test').on('click', function(e){
            e.preventDefault();
            var rowData = table.row( jQuery(this).parents('tr') ).data();
            rowCount += 1;
            table.row.add( {
                "DT_RowId": "row_" + rowCount,
                "first_name":   rowData.first_name,
                "last_name":    rowData.last_name,
                "position":     rowData.position,
                "office":       rowData.office,
                "start_date":   rowData.start_date,
                "salary":       rowData.salary
            } ).draw();
        });

        jQuery('.add-row-test').on('click', function(e){
            e.preventDefault();
            rowCount += 1;
            table.row.add( {
                "DT_RowId": "row_" + rowCount,
                "first_name":   "asd",
                "last_name":    "asdf",
                "position":     "asdf",
                "office":       "asdf",
                "start_date":   "sadf",
                "salary":       "asdf"
            } ).draw();
        });

tangerine

Did you check the relevant documentation?
https://datatables.net/manual/tech-notes/11

kthorngren

I built a test case for you and your code seems to work:
http://live.datatables.net/guwafemu/85/edit

I believe the error you mentioned happens with inline or bubble editing. Do you have either enabled? Please update the test case to replicate the issue and/or provide the steps needed to show the problem.

Kevin

allan

Like Kevin, I suspect you have an event handler somewhere that is triggering inline() on click in the cells in the table, and the selector being used for that event listener isn't discounting the last column in the table. Might that be the case here?

Thanks,
Allan

Nwilliams8162

I don't have inline() or bubble() anywhere in my javascript file. Only thing I see that says inline is this:

formOptions: {
inline: {
onBlur: 'submit'
}

Also, when I do the following on each line (clicking delete) it just refreshes the page instead of deleting the line and re-drawing:

jQuery('a.editor_remove').on( 'click', function (e) {
e.preventDefault();
table
.row(jQuery(this).parents('tr'))
.remove()
.draw();
rowCount = rowCount == 1 ? 0 : rowCount - 1;
} );

kthorngren

when I do the following on each line (clicking delete) it just refreshes the page instead of deleting the line and re-drawing:

That doesn't happen in the example of your code that I built. Please either provide a link to your page or update the test case to show one or both of these issues so we can help debug the issues.

Kevin

allan

The e.preventDefault() should be stopping the a triggering a refresh.

Could you give me a link to your page (you can send me a private message by clicking my username above and then "Send message", or drop me an e-mail)? That way I'll be able to take a look at the whole code for the page and understand what is causing these two issues.

Thanks,
Allan

allan

Ooo - I think I've just figured out the e.preventDefault() one. I'll bet it is because there are not a.editor_remove elements on the page when that is run. Try using a delegated event:

jQuery('body').on( 'click', 'a.editor_remove', function (e) {

I think that will resolve that one at least. See this example for a little more info on delegated events.

Allan

Nwilliams8162

Got it working, thanks.