Nested Editing with no Ajax URL causes data to be erased

Ron Wilson

Link to test case: https://live.datatables.net/taxowela/8/edit

Nested Editing - non Ajax

Setup

Similar to the Nested editing - single selection example.
- A main table
- A main table editor
- A editor for the editor

The main editor has a field that is a datatable.

The difference between my test case and the example is that my data source is a javascript array local to the code. (In my real case I get the data from a server but then must transform the data before adding it to the table.)

Error messages shown

After editing an item in the table that is an editor field and submitting the update, there's a console error output because the datatables __reload function can't handle the case where there is no ajax url.

** TypeError: null is not an object (evaluating 'ajax.url') **

From the __reload function:

if ( _fnDataSource( settings ) == 'ssp' ) {
    _fnReDraw( settings, holdPosition );
}
else {      <----- This assumes there is an Ajax URL (and calls _fnBuildAjax)
    _fnProcessingDisplay( settings, true );

    // Cancel an existing request
    var xhr = settings.jqXHR;
    if ( xhr && xhr.readyState !== 4 ) {
        xhr.abort();
    }

    // Trigger xhr
    _fnBuildAjax( settings, {}, function( json ) {
        _fnClearTable( settings );

        var data = _fnAjaxDataSrc( settings, json );
        for ( var i=0, ien=data.length ; i<ien ; i++ ) {
            _fnAddData( settings, data[i] );
        }

        _fnReDraw( settings, holdPosition );
        _fnInitComplete( settings );
        _fnProcessingDisplay( settings, false );
    } );
}

This is being called on the Main Table for some reason.

How to reproduce

• Load the test case page
• Select one of the lines, and then the Edit button
• Select a line in the Employees field (the datatable), and then the Edit button
• Change some data, click the Update button

Description of problem

Editing the main table row that was previously edited displays "No data available in table". That table row has now been cleared. The reason seems obvious, since the __reload function failed, so I'm wondering if I'm missing some configuration of event handling that should be done to bypass the default handling.

Ron Wilson

I found one solution but it's not really satisfying. If I don't assign the main table as the 'table' for the first level editor, then the chain of functions leading to reloading the table is not called and there is no error. However, it means that every field in the first level editor must be populated manually; there is no automatic pick up of the first two fields in the first level editor.

allan

Hi Ron,

Thanks for the test case - that was a great help!

The issue, surprisingly, isn't the __reload error, although that certainly isn't helping. I've got a fix for that which will be in the next release of Editor. A hacky workaround is to override the function that is triggering the reload in Editor, and make it account for the fact that Ajax might not be used:

DataTable.Editor.dataSources.dataTable.refresh = function () {
  var dt = new DataTable.Api(this.s.table);

  if (dt.ajax.url()) {
    dt.ajax.reload(null, false);
  }
  else {
    dt.rows().invalidate();
  }
};

What the real issue is, is that the datatable field will attempt to resolve itself into a value for submission to a server - typically a list of primary key values. In this case, that is an empty string, and so your employees array gets overwritten with the value of the field, which is an empty string. Hence the error.

What we want in this case is for that overwrite not to happen, which we can do with by not submitting the field's value - fields.submit.

That means that the original array is left as a reference, and since it has been updated, the data inside it contains the edited values.

I've updated the test case with this change here: https://live.datatables.net/taxowela/9/edit .

Regards,
Allan

Ron Wilson

Thanks Allan!
Makes sense, and fixes it. Now to remember to remove the override when Editor is updated