New value in inline editor not updating when hitting enter

villarroel88

I have the inline editor extension, and when i edit a field and press enter, the ajax works, it saves the data, but visually the input goes back to what i had before, it doesnt update to the value i entered.

any ideas why this might happpen? thanks!

kthorngren

I would start by verifying the serve is returning the expected data when editing. This page describes the requirements:
https://editor.datatables.net/manual/server#Server-to-client

Kevin

villarroel88

This is my route to edit one field:

console.log('ape1', data[recordID].ape1, recordID)
//update ape1

                    const pool1 = new sql.ConnectionPool(config, err => {
                        if (err) {
                            console.log(err)
                        } else {
                            pool1.request()
                                .query(`EXEC zsp_actcamporeg ${recordID}, 'ape1', '${data[recordID].ape1}'`, (err, results) => {
                                    if (err) {
                                        console.log(err)
                                    } else {
                                    }
                                })
                        }
                    })
                }

the console.log at the beggening returns something like

ape1 ACOSTA 2587818

ape1 is the name of the field, ACOSTA is the new content i entered and the number is the record id. but somehow when i type ACOSTA and hit enter, visually it goes back to what it was before.. not the new entered text

kthorngren

Are you returning the data for all the columns or just the edited column?

Kevin

villarroel88

req.body.data returns

{ '2587829': { ape1: 'MARTINEZ' } }

field id, field name and field new content

villarroel88

my script is the following

    var editor;
    $(document).ready(function () {
    editor = new $.fn.dataTable.Editor( {
    ajax: "/updateanddelete",
    table: "#bootstrap-data-table",
    fields: [ {
    label: "Ord:",
    name: "ord"
    }, {
    label: "Ape 1:",
    name: "ape1"
    }, {
    label: "Ape 2:",
    name: "ape2"
    }, {
    label: "Nombre:",
    name: "nombre"
    }
    ]
    } );
    $('#bootstrap-data-table').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this, {
      onBlur: 'submit'
    } );
    } );
    editor.field( 'ord' ).disable();
    $('#bootstrap-data-table').DataTable({
    dom: "Bfrtip",
    "language": {
    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
    },
    rowReorder: {
    dataSrc: 'ord',
    editor:  editor
    },
    "iDisplayLength": 800,
    select: true,
    columns: [ {

    data: "ord"
    }, {

    data: "ape1"
    }, {

    data: "ape2"
    }, {

    data: "nombre"
    }
    ],
    buttons: [
    // { extend: "create", editor: editor },
    { extend: "remove", editor: editor },
    'print'
    ]
    });
    });

kthorngren

Its still not clear if you are returning the full row of data as described in the doc I linked to. My guess is the format of your data is not consistent with the format of the original data. Can you post your Datatables init code?

And post a snippet of the original data returned.

Kevin

villarroel88

.query(EXEC zsp_actcamporeg ${recordID}, 'ape1', '${data[recordID].ape1}', (err, results) => {
if (err) {
console.log(err)
} else {
console.log(results)
}
})

results return

{ recordsets: [],
recordset: undefined,
output: {},
rowsAffected: [ 1 ] }

kthorngren

It still seems you are not returning the data in the expected format. You can use the diagnostic steps in this technote to see what exactly is returned in the ajax response. You can compare the request/response to the link I provided above.

Even with inline editing you need to return the data for all the columns of the row you are editing.

Kevin

villarroel88

i modified the stored procedured that im working with to update the field and now im returning this

{ recordsets: [ [ [Object] ] ],
recordset:
[ { recid: 2587830,
ordcuad: 1,
ape1: 'MARTINEZasdf',
ape2: 'RAMIREZ',
nom: 'ABEL ALEJANDRO',
casilla: '9999C1' } ],
output: {},
rowsAffected: [ 1, 1 ] }

do i have to modify it to match this format?

{
"data": [
{
"DT_RowId": "row_29",
"first_name": "Fiona",
"last_name": "Green",
"position": "Chief Operating Officer (COO)",
"office": "San Francisco",
"extn": "2947",
"salary": "850000",
"start_date": "2010-03-11"
}
]
}

sorry for basic questions, its the first time i use datatables editor.

kthorngren

sorry for basic questions, its the first time i use datatables editor.

Not a problem. We all were first time users once

do i have to modify it to match this format?

As far as I know there is no option to change where the Datatable's Editor expects the data. You can either change the object from recordset to data in your stored procedure or you can try the success function, as described in the Editor ajax option to return the data in the data object.

Kevin

villarroel88

Is there any way i can hire someone to do this for me from this forum? lol