Rails 3 calculate line totals with Ajax - ruby-on-rails

Question

I have an invoice app. An invoice has line items. The line totals and grand total are calculated fine after you submit the invoice.
But I also would like to calculate the line totals and grand total BEFORE the invoice is submitted. For example, if you change the quantity, the line total and grand total should change.
I'm currently looking at different jQuery plugins. Maybe you have done something similar in the past. What would you recommend?

Answer 1

You don't need a plugin. jQuery alone is enough. What you'll want to do is add a handler in your application.js file for either .change() or .blur(). I recommend the latter. Then utilize HTML5's "data-" attributes to store the price as a plain Float so that jQuery can grab it and do some math to it.
invoice.html.erb
<div class="item">
<h3>Item #1</h3>
Price: <div class="price" data-price="10.20">$10.20 USD</div>
Qty: <input type="text" size="2" id="product_1_quantity" class="quantity" value="1">
</div><br /><br />
<div class="item">
<h3>Item #2</h3>
Price: <div class="price" data-price="3.50">$3.50 USD</div>
Qty: <input type="text" size="2" id="product_2_quantity" class="quantity" value="1">
</div><br /><br />
Total Price: <span id="total-price">input quantities</span>
application.js
function getTotal(quantities) {
var total = 0;
$.each(quantities, function() {
total += parseFloat($(this).closest('.item').find('.price').attr('data-price')) * parseInt($(this).val());
});
$("#total-price").html("$" + total + " USD");
}
$(document).ready(function() {
var quantity = $('.quantity');
getTotal(quantity); // So the total is calculated on page load.
quantity.blur(function() {
getTotal(quantity);
});
});
This isn't perfect (you'll need to add some handling for multiplication that causes $50.9999999, for example, and for ending Zero's), but the idea is there.
Tested here: http://jsfiddle.net/J3YKh/1/
edit
Also note that with this code, if one of the quantities is empty, it will not work. That's an easy fix:
quantity.blur(function() {
var qty = $(this).val;
if(!qty) qty = '0';
getTotal(quantity);
}
Just fills in "0" if there is no value, then proceeds as normal. Untested.