Inline Edit not refreshing datatable row with updated value after successful ajax call?

Vasundhara

edit configuration:

var editor;

 editor = new $.fn.dataTable.Editor({
        table: "#ProductTable",
        idSrc: "PRId",
        ajax: function (method, url, d, success, error) {
            var details;
            var ProductID;
            $.each(d.data, function (key, value) {
                details = JSON.stringify(value);
                ProductID = key;
            });
            
            $.ajax({
                url: root + '/updateproduct?key=' + ProductID,
                dataType: "json",
                contentType: "application/json",
                type: 'POST',
                data: details,
               
                success: function (json) {
                                      console.log(json.Data);
                    success(json.Data);
                },
                error: function (xhr, error, thrown) {
                    error(xhr, error, thrown);
                },
                
            });
            
        },
        
        fields: [{
            label: "version:",
            name: "version"
        }]
    });

Inline Event binding

 $('#ProductTable').on('click', 'tbody td.editable', function (e) {
          editor.inline(this, {
            submitOnBlur: true
         });
    });

After inline editing , the ajax call returns the following response

{
    ProductId: "144"
    ProductName: "Product-Test"
    PRId: 201
    ValueVersion: "3333"
    Name: "test"
}

Please help me what am i missing here??

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The response from the server is not what Editor expects. What is expects in return is documented here.

If you can't change your server-side return, you could modify the data in your success callback like this:

let data = {
  data: [];
};

data.data[json.Data.ProductId] = json.Data;
success(data);

Allan

Vasundhara

Thank you Allan . I believe success() function refreshes the DataTable.

I need to update the row after inline Edit with the response from server instead of refreshing the Datable

I am getting this error with your solution proposal

datatables.min.js:88 Uncaught TypeError: ******Cannot read property 'ProductId' of undefined******
at datatables.min.js:88
at f.id (dataTables.editor.min.js:110)
at f._dataSource (dataTables.editor.min.js:82)
at f._submitSuccess (dataTables.editor.min.js:100)

allan

I'm not sure why that would happen from the above I'm afraid. You have:

console.log(json.Data);

which produces:

{
    ProductId: "144"
    ProductName: "Product-Test"
    PRId: 201
    ValueVersion: "3333"
    Name: "test"
}

Is that correct?

So json.Data.ProductId really should be defined!

I think I'd need a link to a page showing that error to understand why that isn't working, since it appears to be correct to me.

Allan