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>