Re-draw after an inline editor update with type select2

rycwilson

I'm trying to update a single field within a row using inline editor with type select2. While I'm getting a successful update on the server and the json response in the client shows the updated value (in precisely the same json format as was used to construct the table via ajax), the re-draw that I expect is not happening. The editor closes and just leaves the previous value in place. Guessing there's some trick related to this being a select box that I'm not getting, or perhaps something to do with using orthogonal data? Maybe a manual re-draw is necessary?

Here are the relevant code snippets (some parts omitted for brevity)

$('#crowdsource-contributors-table').DataTable({
  ...
  columns: [
    ...
    {
      name: 'crowdsourcing_template',
      data: {
        _: 'crowdsourcing_template.id',
        display: 'crowdsourcing_template.name'
      },
      defaultContent: '<span class="placeholder">Select</span>'
    },
    ...
  ]
  ...
})

contributorsEditor = new $.fn.dataTable.Editor({
  ...
  fields: [
    {
      name: 'crowdsourcing_template.id', 
      type: 'select2',
      // tried copying the columns.data property here => no effect
      ...
    },
  ],
  ...
});

.on('click', 'td.crowdsourcing-template', function (e) {
  contributorsEditor.inline(this, 'crowdsourcing_template.id',
    {
      onComplete: function (editor) {
        console.log(rowData);  // shows updated crowdsourcing_template.id value => ok
        editor.close();
      },
      drawType: true,
      ...
    }
  );
})

rycwilson

A re-draw for the individual row seems to work fine. But is there a cleaner way to perform the re-draw? Feels like I'm updating the row by feeding it the data it already has.

.on('click', 'td.crowdsourcing-template', function (e) {
  
  var $row = $(this).parent(),

  contributorsEditor.inline(this, 'crowdsourcing_template.id',
    {
      ...
      onComplete: function (editor) {
        var dt = $(editor.s.table).DataTable(),
            rowData = dt.row($row).data();
        editor.close();
        dt.row($row).data(rowData).draw();
      }
    }
  );

});

allan

That shouldn't be needed - Editor should automatically redraw the row for you based on the data that is being returned from the server (like in this example).

Could you give me a link to a page that shows the issue? If that isn't possible, can you show me the JSON that the server is returning after an edit and also the data that was submitted to the server?

Thanks,
Allan

rycwilson

Thanks Allan. Can I direct message a password to my staging site?

Note that I've set the idSrc option on my editor instance to be 'id'

Here are the params received by the server:

{
  ...
  "data": {
    "22": {
      "crowdsourcing_template": {
        "id": "16"
      }
    }
  },
  ...
  "id": "22"
}

Here is the server's response. Note that data for all row fields is sent (omitted for brevity). It's essentially the same json structure that was used to build the table via ajax.

{
  "data": [
    {
      "id": 22,
      ...
      "crowdsourcing_template": {
        "id": 16,
        "name": "Customer Success"
      }
    }
  ]
}

rycwilson

Ahh, I've got it. It's a data as object vs. array issue. Tried removing the array format on the server before but I hosed up the json formatting. Took another shot at it and it's working now, no re-draw needed. Thanks!

rycwilson

Oops, no, still an issue. So with the array structure removed in the server response, the row is now disappearing when the response arrives.

allan

Yes pease - you can send me a PM by clicking my forum name above and then "Send message".

So with the array structure removed in the server response, the row is now disappearing when the response arrives.

Yup - Editor needs the data for the edited row to be included in the response from the server.

Thanks,
Allan