Save data after editable callback.

[DonLafferty]

I've figured out how to use the editable widget and I've got a function bound to the callback but for the life of me I can't seem to figure out how to get the data from the cell that was changed in the callback.

I know it's in the returned data but there doesn't seem to be any simple method to pull it out and send it back to the server in an Ajax function.

Do you have an example anywhere or a little better documentation? I know the change is rather new but it's just what I've been looking for so I can stop using DataTables and jEditable and just use Tablesorter exclusively. (I love this plugin btw. Thanks!)

[Mottie]

Hi @DonLafferty!

Sorry I didn't provide better documentation; but you can bind to the editComplete event (set by the editable_editComplete option.

$('table > tbody').on('editComplete', 'td', function(){
  var $this = $(this),
    $allRows = $this.closest('table')[0].config.$tbodies.children('tr'),

    newContent = $this.text(),
    cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
    rowIndex = $allRows.index( $this.closest('tr') );
  /*
  $.post("mysite.php", {
    "row"     : rowIndex,
    "cell"    : cellIndex,
    "content" : newContent
  });
  */
});

I'll be sure to include that in the documentation in the next update!

Edit: I've updated my example to include how to determine row & cell indexes

[DonLafferty]

This is excellent and solves that problem thank you. One more issue and maybe it needs a new post but I'll start by putting it here.

I would like to be able to edit all columns of a table with up to 100 or more rows. I really don't want to have to list them all in the editable_columns array. Is there a shorthand method to denote all like [0:x] where x is the last row or perhaps [0-x] or maybe even just editable_columns : all,

That would be so nice.