datatablesdatatables-1.10jquery-datatables-editor

Row disappearing after edit submitted in DataTables Editor


I'm using datatables editor. When I try to edit and post it to the server, the row keeps disappearing. After refreshing the page, I can see the data actually updated.

Here's my code snippet.

var editor = new $.fn.dataTable.Editor({
    ajax: "/ajax/clips/edit",
    table: "#clips_table",
    idSrc: "id",
    fields: [
        {
            label: "Id",
            name: "id",
            type: "hidden"
        },
        {
            label: "Player",
            name: "player",
            type: "select",
            options: [
                { label: "Rooney", value: "Rooney" },
                { label: "Bale", value: "Bale" }
            ]
        }
    ]
 },
     editorOpenValues;

 editor.on('open', function() {
     editorOpenValues = JSON.stringify(editor.get());
 })
 .on('preBlur', function () {
     if (editorOpenValues !== JSON.stringify(editor.get())) {
         this.submit();
     }
 });

 $('#clips_table').DataTable({
     dom: "lfrtip",
     order: [[2, "asc"]],
     columns: [
         {data: "id"},
         {data: "name"},
         {data: "start"},
         {data: "stop"},
         {data: "player"}
     ]
 });

 $('#clips_table').on('click', 'tbody td.player', function () {
     editor.inline(this);
 });

And here's the JSON data that server side script returns:

{
    "data": {
        "0": {
            "id": "322",
            "name": "Scoren 001",
            "start": "00:11",
            "stop": "00:31",
            "player": "Rooney"
        }
    }
}

What could be the possible cause of this error?


Solution

  • Finally, I figured it out.

    I almost forgot to check version compatibility. I was using v1.5.1 for datatables editor. When I upgraded it to v1.5.4 (latest one), the error has gone away.

    Lesson learned! - I'll do version checking first when I face annoying errors.