After successful inline editor ajax update and change of focus, editor reverts to original value

rycwilson

The editor type is textarea. The json response appears to be formatted per requirements, and indeed an api call to get the row data after the update shows the correct new data. There are no console errors.

So the response comes in and the editor closes automatically. At this point it's displaying the new, correct data that was just submitted. But as soon as I click elsewhere (focus change), the data reverts to the previous value. If I open the editor again, the new data is there.

From the console I can run .row('#my-row').invalidate().draw() and the value is updated. However when I try to do this from within the submitComplete handler, it has no effect.

Note I am using drawType: 'none'. Toggling this seems to have no affect. Also tried using the data and dom arguments for invalidate to no effect.

Any tips on what to look for here?

colin

Hi @rycwilson ,

That suggests the server isn't responding to the data correctly. Are you able to link to your page that demonstrates the issue? If not, please can you post your code here, and also the Ajax response after the inline edit.

Cheers,

Colin

rycwilson

In the table init code, the field in question is defined simply under the columns option...

{
  name: 'my_data',
  data: 'my_shared_data'
}

The editor instance is created with new $.fn.dataTable.Editor and includes...

fields: [
  {
    name: 'my_data',
    data: 'my_shared_data',
    type: 'textarea'
  }
]

The editor is opened with...

$('#my-editor').inline(
  $('#my-row').find('td.my-data')[0], 
  'my_data', 
  { buttons: button_options }
)

So far, so good. Data is submitted and everything updates as expected. Server json response is snipped here to show the relevant field, however the response does include all data and exactly matches the data structure that was initially loaded via ajax. An extra "errors" field is added since I'm not using the default flash message system...

{
  "data": [
    {
      "id":261,
      "my_shared_data": "foo bar lorem",
    }
  ],
  "error": "",
  "errors": false
}

After the response, this call shows the correct new data...

$('#my-table').DataTable().row('#my-row').data()

.. but, as outlined above, clicking outside the editor results in the displayed data reverting to the old value. Re-open the editor and the correct data is there.

allan

Have you used idSrc for Editor to tell it to use the id property as the row id? Likewise, it would be worth setting rowId for DataTables also to id.

If that doesn't resolve it, can you give me a link to the page showing the issue?

Thanks,
Allan

rycwilson

Yes, I'm using idSrc: 'id' - sorry forgot to include that one. I wasn't using rowId but it doesn't appear to make a difference.

I will dm you with access to my staging site.

roteague

I'm running into almost same issue. Was there a resolution?

allan

Embarrassingly I lost track of this thread. Looking at it now, the demo site actually appears to work okay.

@roteague - Could you give me a link to your own site so I can take a look please? Most likely the issue is related to the returned data from the inline edit request.

Allan

roteague

Hi Allan, sorry for the late response, I was out for the holidays. I did get it to work, I switched from using the Microsoft Json to using Json.net and changing how I was returning the data to this:

        var json = JToken.FromObject(new { data = list });
        return Ok(json);

I appreciate the help. I'm new to the editor and just finding my way around it.