Editor creates new record on update

fcssbanas

Hi there,

I am posting to an API, and using Datatables + Editor for the data. I am trying to use any of the editors (bubble, inline, etc) to edit the data, but the Name/Description keep showing as NULL and a result is being created as opposed to updated. So, I know am doing something brilliantly stupid - where am I going wrong with this? I've tried passing the ID, and data is being passed when I console.log the editor

{"action":"edit","data":{"3":{"Name":"Adding a name"}}}

But the result:

ResponseObject  Object
ID  26
Name    null
Description null
ReferenceTransactionID  "d8cf1997-b11f-e711-80f3-1223a54a7fb9"
Enabled false
APITransactionID    "d8cf1997-b11f-e711-80f3-1223a54a7fb9"
Code    201
Result  "Created"

Here's the code:

var editor; // use a global for the submit and return data rendering in the examples
    editor = new $.fn.dataTable.Editor({
      ajax: {
        "url": "/api/Template",
        "type": "POST",
        "contentType": "application/json; charset=utf-8",
        "dataSrc": function (json) {
          return JSON.stringify(json.ResponseObject);
        },
        "data": function (row) {
          return JSON.stringify(row.data);
        }
      },
      idSrc: "ID",
      table: "#example",
      fields: [
        {
          label: "ID",
          name: "ID"
        },
      {
        label: "Name:",
        name: "Name"
      }, {
        label: "Description",
        name: 'Description'
      }
      ]
  });

  // Activate an inline edit on click of a table cell
  $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.bubble(this);
  });
 
  $('#example').DataTable({
    dom: "Bfrtip",
    ajax: {
      "url": "/Api/Template",
      "dataSrc": function (json) {
        return json.ResponseObject;
      },
      "data": function (d) {
        return JSON.stringify(d);
      }
    },
    rowId: "ID",
    processing: true,
    columns: [
      { data : "ID" },
      { data: "Name" },
      { data: "Description" }
    ],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit", editor: editor },
      { extend: "remove", editor: editor }
    ]
  });

Thanks for all your help!

allan

What's your server-side script / API doing? It looks like it is treating the POST as a "create" action, rather than attempting to edit the existing row.

Does it expect a PUT for either create or edit perhaps?

Allan

fcssbanas

I don't believe it even has a PUT option integrated (this is someone's custom API), but I will double check.

• EDIT: even on create, none of the data gets passed (name/description). It just creates a new, blank entry.

*EDIT2: so it turns out, the way the API returns the JSON was the culprit. I had to change how to send it back to the API to:

"data": function (row) { // pushes the data
          var data = {};
          $.each(row.data, function (key, value) {
            data = { "ID": key, "Name": value.Name, "Description": value.Description };
          });

Delete still doesn't work, but I believe that to be an API issue as opposed to an Editor issue.

allan

Thanks for the updates. Good to hear you've got the edit working!

Allan