I am trying to build a invoice,
I am getting the values from the database to populate the Materialize dropdown and onAutocomplete to trigger the next events
If user enters the Product code the value is being passed through ajax request and assigned to the corresponding values.
For single row the code works perfect,
Issue is when I add a new row and update the changes to any of the field.
Issue I am facing:
Values in all the rows are updated regardless of what's being clicked.
I am not sure how to bind response to the particular fields.
$(document).ready(function (e) {
var name = {};
var products = {!! $products->toJson() !!};
// var products_string = JSON.stringify(products);
for (var i = 0; i < products.length; i++) {
name[([products[i].product_code])] = null;
}
// console.log(name);
$('input.autocomplete').autocomplete({
data: name,
onAutocomplete: function (data) {
var values = data.split(",");
var product_code = values[0];
console.log(product_code);
$.ajax({
type:"GET",
url: "{{ route('product-fetch')}}",
data: {'product_code' : product_code},
success:function(response){
console.log(response);
$('product_name').val(response.name);
$('input.qty').val(response.quantity);
$('input.price').val(response.price);
$('input.gst').val(response.tax);
}
});//End of ajax
}//End of OnAutocomplete
});//End of autocomplete
});
//This function created so that new rows could grab the autocomplete functionality.
function productFetch(e){
var name = {};
var products = {!! $products->toJson() !!};
// var products_string = JSON.stringify(products);
for (var i = 0; i < products.length; i++) {
name[([products[i].product_code])] = null;
}
// console.log(name);
$('input.autocomplete').autocomplete({
data: name,
onAutocomplete: function (data) {
var values = data.split(",");
var product_code = values[0];
console.log(product_code);
$.ajax({
type:"GET",
url: "{{ route('product-fetch')}}",
data: {'product_code' : product_code},
success:function(response){
console.log(response);
$('.product_name').val(response.name);
$('.qty').val(response.quantity);
$('.price').val(response.price);
$('.gst').val(response.tax);
}
});//End of ajax
}//End of OnAutocomplete
});//End of autocomplete
}
// $(document.body).ready(function() {
// //Invoke the Autosearch
// // productFetch();
// //initiate select form
// $(".gst_type").formSelect();
// });
$(function() {
var i = 1;
$("#add_row").on("click", function(e) {
e.preventDefault();
b = i - 1;
$("#addr" + i).html($("#addr" + b).html());
//! will remove the selected element based on the class before being appended .
$(".select-dropdown").remove();
$(".tab_logic").append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
//runs the method which will fetch the autocomplete
productFetch();
//initiate select form
$(".gst_type").formSelect();
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html("");
i--;
}
});
$("#tab_logic tbody").on("keyup change", function() {
calc();
});
$("#gst").on("keyup change", function() {
calc_total();
});
});
//Logic for the calculation
function calc() {
$("#tab_logic tbody tr").each(function(i, element) {
var html = $(this).html();
if (html != "") {
var qty = $(this)
.find(".qty")
.val();
var price = $(this)
.find(".price")
.val();
var gst = $(this)
.find(".gst")
.val();
var gst_total = (qty * price * gst) / 100;
$(this)
.find(".total")
.val(qty * price + gst_total);
calc_total();
}
});
}
function calc_total() {
total = 0;
$(".total").each(function() {
total += parseInt($(this).val());
});
$("#sub_total").val(total.toFixed(2));
tax_sum = (total / 100) * $("#gst").val();
$("#tax_amount").val(tax_sum.toFixed(2));
$("#total_amount").val((tax_sum + total).toFixed(2));
}