Update row after cell edit

tiebreaktech · December 2015

After i cast editor.bubble(this) and i edit a cell i'd like to reload the whole row, not the entire table, using the
date coming from the server. How can i do that?

allan · December 2015

Just the edited row being reloaded is what should happen - as you will be able to see in this example.

If that isn't working for you, could you give me a link to the page showing the issue so it can be debugged please.

Allan

tiebreaktech · December 2015

that could be complex, but let me show the declaretions

///DATATABLE

function load_table() {

  if(serie == "A") 
    var columns = columnsA;
  else
    var columns = columnsB;

  $('#edit').DataTable({
    drawCallback: tab_change,
    paging: true,
    pageLength: 10,
    ajax: "/api/role/get/"+serie+"/"+stagione,
    dom:  'Tfrtip',
    columns: columns,
    tableTools: {
        sRowSelect: "single",
        aButtons: [
            { sExtends: 'editor_edit',   editor: editor }
        ]
    }
  });    
}

//EDITOR

function create_editor() {
  if(serie == "A")
    var fields = fieldsA;
  else
    var fields = fieldsB;

  editor = new $.fn.dataTable.Editor( {
    table: "#edit",
    ajax: "/api/role/set",
    fields: fields
  });

  $('#edit').on( 'click', 'tbody td:nth-child(29),:nth-child(30),:nth-child(31),:nth-child(33),:nth-child(34),'
    +':nth-child(35),:nth-child(36),:nth-child(37),:nth-child(38),:nth-child(39),:nth-child(40),:nth-child(41),:nth-child(42),'
    +':nth-child(43),:nth-child(44),:nth-child(45),:nth-child(46)', 
    function (e) {
      editor.bubble( this );
  });

  $('#edit').on( 'page.dt', function () {
    window[shown]();
  });
}

after every post it is updated only the single cell that i modify

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · December 2015

after every post it is updated only the single cell that i modify

Bubble editing will submit only the changed value. Is that the problem that you are having here? You can use:

editor.bubble( this, {
  submit: 'allIfChanged'
} );

if you want to submit all fields. See the form-options documentation (specifically the submit section).

Allan

tiebreaktech · December 2015

the fields of the row are already sent together. my problem is that only the single cell that i edited with bubble() is updated after the post. instead i want the whole row to be updated with the json sent by the server as reply..

allan · December 2015

Are you able to give me a link to the page so I can take a look and try to understand the issue please? I'm not clear if the problem is with the parameters being sent to the server (which would be resolved per my suggestion above), or if the issue is with the JSON being returned from the server (in which case it is an issue with the server-side script and we would need to know what that script contains).

Allan

tiebreaktech · December 2015

Sorry, It requires log in. The response from the server is the same that i use to populate the table in the first place, just one row instead of n rows.

something like:

{ "data" : [ { "field" : value, "field2" : value2 } ] }

tiebreaktech · December 2015

NOT solved

editor.on( 'submitSuccess', function (e, json, data) {
datatable.row('.selected').data( json.data[0] );
});

allan · December 2015

Hi,

Thanks for the updates. Great to hear you've got it working now.

Allan

tiebreaktech · December 2015

false alarm :-(

it works only the first time on the same line. the second i got this:

TypeError: b[0].aoData[this[0]] is undefined
...this.length?b[0].aoData[this[0]]._aData:k;b[0].aoData[this[0]]._aData=a;ca(b[0]

tiebreaktech · December 2015

any idea???

allan · December 2015

I'm afraid I'm still not actually clear on what the issue is, as per my last reply. Is the issue with the data submitted, or the data returned?

I'm afraid that without a test case I'm really just guessing.

You stated:

my problem is that only the single cell that i edited with bubble() is updated after the post. instead i want the whole row to be updated with the json sent by the server as reply..

My problem is that I don't quite understand the issue. By default Editor will submit only the altered parameter, but the PHP and .NET libraries will return the whole row. So I don't know what would cause this issue.

Allan

tiebreaktech · December 2015

In a row of n cells i alter one of them but i want to reload the entire row because the other values are related with the one that i modify.

i think i found a solution but the system crashes. i call

editor.on( 'submitSuccess', function (e, json, data) {
datatable.row('.selected').data(json.data[0]).draw();
});

the first edit goes well but the second cause a crash with error:

TypeError: b[0].aoData[this[0]] is undefined ...this.length?b[0].aoData[this[0]]._aData:k;b[0].aoData[this[0]]._aData=a;ca(b[0]

The strange thing is that, if i edit a different row after every edit, no problems occur at all. it appens if i try to edit the same row again.

allan · December 2015

In a row of n cells i alter one of them but i want to reload the entire row because the other values are related with the one that i modify.

That is exactly what should happen, and is what happens in the demos.

There should be no need to add any additional code.

We need to find out why that is not working for you.

What is the response to the Ajax request after the bubble edit is submitted?

Allan

tiebreaktech · December 2015

a json with the same format that i use to create the table in the first place, only ine row instead of all of them

{ "data": [ {"field" : value, "field2" : value2 ,.... ,.... ] }

allan · December 2015

Does that data include the row id? If you have a look at the example I linked to and click the "Ajax data" tab below the table, then edit a cell, you'll see the data that is sent to and received from the server.

As I say, that should be all that is needed to have the row update.

If that isn't working, I'm afraid I really would need to be able to see a page that is demonstrating that issue in order to be able to debug and help resolve it.

Regards,
Allan

tiebreaktech · December 2015

maybe i found something. in the example the post is like

action = edit
data[row_43][first_name] = Brunoooo

instead in my post there isn't the first index but it is generated like

action = edit
data[field] = value
data[field2] = value2

could it be the reason?
Also can you tell me if DT_RowId must be in a particular format?
Could be a problem if the row id is a string like 16494-A-2015 ?

allan · December 2015

could it be the reason?

Very possibly. The data format you have there looks like the 1.4 legacy format. Do you have the legacyAjax option set or are you using a version before 1.5? The 1.5 libraries won't work with the legacy format.

Also can you tell me if DT_RowId must be in a particular format?

No - it can be anything you want and long as it can be used to uniquely identify the row in the database. In my examples I use row_{primaryKey} simply to make it an easy to use DOM id, but you could use other values if you need.

Allan

tiebreaktech · December 2015

done. the row update problem was a version problem then.
with editor up to date it updates the entire row.

allan · December 2015

Great to hear. Thanks for posting back.

Allan

Update row after cell edit

Update row after cell edit

Answers

Howdy, Stranger!

Categories

DataTables

Update row after cell edit

Update row after cell edit

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables