Is it possible to add another column value, like id, in request when using inline()

lsukharn

I am new to the Editor, so I am wondering how I can do the following:

$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this, 'additional column' );
} );

So in this case I am sending not only the edited cell data, like {'edited_cell': 100}, but additional information about the entry, like id. For example, the request would be {'id': 1, 'edited_cell': 100} now.
This additional column ('id') then can be used to update the right entry in the db.

Any help is much appreciated!

colin

Hi @lsukharn ,

The additional information, I believe, will go in the submit() call - take a look at the penultimate example which adds an extra field.

This thread also talks about using ajax.data and
preSubmit so there may be other avenues!

Hope that helps,

Cheers,

Colin

ayz

@colin: I thought Editor automatically handles the 'id' field. Why is a separate column needed to update the db?

allan

All correct

The way Editor submits information is that the id field is implicit in the name of the parameter. e.g. consider submitting:

data[row_29][first_name] = Fiona

The id is 29 (with a row_ prefix to help avoid conflicts and make it a valid HTML4 id). To get that information on the server-side (if you aren't using the provided libraries) you'd need to loop over the data submitted and extract that information.

The alternative, as Colin mentioned, is to use ajax.data or preSubmit to modify the data that is being submitted to the server (i.e. moving the loop from the server-side to the client-side to extract that data). The primary disadvantage of that (and why Editor doesn't do that) is that you loose the ability to do multi-row editing.

To be clear, there is no need to have the id as an extra column (although you can do so if you want!).

Regards,
Allan

lsukharn

Allan, I found that iterating through request is the best solution, it also adds multi-row editing ability. I simply used:

ajax: {
  edit: {
    type: 'PUT',
    contentType: 'application/json;  charset=utf-8',
    url: '../save_edits',
    "dataType": 'json',
    data: function(d) {
      return JSON.stringify(d);
    }
  }
},

However I encountered another another problem:

When I try to send only one value:

    $('#stats').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

I don't know how to create a response that will update/refresh this value in DataTable.
So I get a response like this: {data: [{'id': 'bla', 'cell1': 'value'}]}, but the value doesn't get refreshed. So found a solution where I send all the row values and then return a response with all:

    $('#stats').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submit: 'all'
        } );
    } );

response: `{data: [{'id': 'bla', 'cell1': 'value', 'cell2': 'vlaue2', ..., 'cellN': 'valueN'}]}`

This way the data refreshes w/o page refresh. It works, but looks a bit hacky.
Is there a way to send only the edited value in request and somehow form a response that will be rendered in the front end?

colin

Hi @lsukharn ,

One option to reduce the traffic may be to use the 'allIfChanged' value on the submit option.

Cheers,

Colin

allan

Yes, just to add to that, Editor currently requires that the whole data object for the row be returned from the server regardless of what field(s) are submitted. That is to allow for server-side updated fields such as last updated by etc.

We are going to relax that a bit in 1.8 to allow an individual field's data to be returned. Until then, if your server responds with all fields if you submit them all, that's a good work around.

Allan