Question

I have this table and i can not make working the function calculator in the td.

The script works perfectly but when i edit the number in the cell( just clicking over the cell to get the input number), i do not get the Total Result. Can you explain which event i should apply to my jeditable plugin? Do you know maybe a different or better method to achieve that?

Thanks

Answer 1

You should use callback event and assign the proper event handler to calculate the total.
Check this code which works and add more actions if think they are needed.
Your code is very strange for me, but anyway it works.
Function tally should be defined outside onrender $(function(){ ... }); block as a global function.

<script type="text/javascript">
    function tally (selector) {
      $(selector).each(function () {
          var total = 0,
          column = $(this).siblings(selector).andSelf().index(this);
          $(this).parents().prevUntil(':has(' + selector + ')').each(function () {
            total += parseFloat($('p#sum:eq(' + column + ')', this).html()) || 0;
          })
          $(this).html(total);
     });
    }

    $(function() {
      tally('p#subtotal');
      tally('p#total');
    });
</script>



<script type="text/javascript" charset="utf-8">
$(function() {
    $('.editable_number').editable(function(value, settings) { return(value); }, {
      type    : 'number',
      style  : "inherit",
      callback: function() {
        tally('p#subtotal');
        tally('p#total');
      }
     }
    );

    $('.editable_textarea').editable(function(value, settings)  { return(value); }, {
     type    : 'textarea',
     width: '200',
     height: '20',
     submit  : 'OK',
     style  : "inherit"
 });
});
</script>