I try to implement a simple order management system where users can create new commands and add two types of product to them. When a user select a product and enter a quantity, the total price is dynamically calculated and displayed in the last field. For adding a new product line to the order, I use the gem Cocoon.
My problem is that I'm not able to calculate the total price for every new product added with Cocoon. Every time I enter a quantity, I get the total price from the first line. Is there anyone who can help me to resolve this issue ?
This is my view/orders/_form.html.erb :
<%= form_for @order do |f| %>
<div id="item">
<%= f.fields_for :line_items do |li| %>
<%= render partial: "line_item_fields", locals: {f: li} %>
<% end %>
<div class="link form-group"><%= link_to_add_association "Ajouter un produit", f, :line_items %></div>
</div>
<div class="actions">
<%= f.submit "Commander", class: "btn btn-primary" %>
</div>
<% end %>
This is my view/orders/_line_items.html.erb :
<div class="nested-fields form-inline">
<div class="form-group">
<%= f.label "Type de produit : " %>
<% if current_user.recruiter.company.pricing_profile.name == ("JobCards single" || "TM Basic") %>
<%= f.select(:name, options_for_select([['Job card', 'Job card']]), {}, {class: "product_name"}) %>
<% else %>
<%= f.select(:name, options_for_select([['Job card', 'Job card'], ['Job page', 'Job page']]), {}, {class: "product_name"}) %>
<% end %>
</div>
<div class="form-group">
<%= f.label "Quantité : " %>
<%= f.text_field :quantity, class: "quantity" %>
</div>
<div class="form-group">
<%= f.label "Prix total : " %>
<%= f.text_field :price, class: "total_price" %>
</div>
<%= link_to_remove_association "Supprimer", f %>
</div>
This is my assets/javascripts/orders.js.erb :
$(document).ready(function() {
function getTotal(p, q) {
var r = 0;
if (q <= 4) {
r = 1;
} else if (q >= 5 && q <= 9) {
r = 0.85;
} else if (q >= 10 && q <= 24) {
r = 0.75
} else if (q >= 25 && q <= 49) {
r = 0.65
} else if (q >= 50 && q <= 99) {
r = 0.55
} else if (q >= 100 && q <= 249) {
r = 0.45
} else if (q >= 250 && q <= 500) {
r = 0.40
}
return q * p * r;
}
function getUnitCost(product_name) {
var unit_cost = 0;
if(product_name == "Job page") {
unit_cost = gon.jp_unit_cost
} else if (product_name == "Job card") {
unit_cost = gon.jc_unit_cost
}
return unit_cost;
}
$(document).on('change', '.product_name', function() {
var q = $(".quantity").val('');
$('.total_price').val('');
});
$(document).on('keyup', '.quantity', function() {
var product_name = $(".product_name").val();
var q = $(".quantity").val();
var p = getUnitCost(product_name);
var total = getTotal(p, q);
$('.total_price').val(total)
});
$("#item").on('cocoon:after-insert', function(e, insertedItem) {
var quantity = insertedItem.find('.quantity').attr('id');
$(document).on("keyup", '#' + quantity, function() {
var q = $("#" + quantity).val();
var product_name = $("#" + insertedItem.find('.product_name').attr('id')).val();
var p = getUnitCost(product_name);
var total = getTotal(p, q);
$("#" + insertedItem.find('.total_price').attr('id')).val(total);
});
});