We Keep Coding

Chrome crashes when printing 2000+ entries on ajax call / Page unresponsive in Chrome

facing an issue when printing more than 2000 entry lines on ajax call. The list of entries may be up to 10000 but when my ajax function calls, all data come but browse shows Page unresponsive when prints.
I have Javascript function to generate invoice lines but when generate and print It shows unresponsive alert.
Here is my javascript code
var contentBody = '';
for (var i = 0; i < data.length; i++) {
var applyToInvoice = (data[i].apply_to_invoice == null)?"":data[i].apply_to_invoice;
var referenceNo = (data[i].reference_no == null)?"":data[i].reference_no;
var referenceNo2 = (data[i].reference_no2 == null)?"":data[i].reference_no2;
var currentBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].current_balance : data[i].current_balance;
var appliedAmount = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].applied_amount : data[i].applied_amount;
var netBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].net_balance : data[i].net_balance;
contentBody = '<tr>' +
'<td><input class="form-check-input form-switch apply-amount" type="checkbox" name="receiptEntryDetailsList[' + i + '].apply" onclick=applyAmount(this) checked></td>' +
'<td class="index-number" id="indexNumber"><input class="receipt-details-id" type="hidden" name="receiptEntryDetailsList[' + i + '].id" value="' + data[i].receipt_entry_details_id + '"></td>' +
'<td><input type="text" class="frm-cntrl invoice-type" name="receiptEntryDetailsList[' + i + '].invoiceType" value="' + data[i].invoice_type + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].invoiceNo" value="' + data[i].invoice_no + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl invoice-date" name="receiptEntryDetailsList[' + i + '].invoiceDate" value="' + data[i].invoice_date + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo" value="' + referenceNo + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo2" value="' + referenceNo2 + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].currentBalance" value="' + currentBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl applied-amount balance-calculate" name="receiptEntryDetailsList[' + i + '].appliedAmount" value="' + appliedAmount + '" onkeyup="calculation(this)" onClick="this.select();"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].netBalance" value="' + netBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].applyToInvoice" value="' + applyToInvoice + '" readonly="readonly" tabindex="-1"></td>' +
'</tr>'
$('#table2 tbody').append(contentBody);
}

Javascript calculation (Products sum without Vat)

Hello I have a problem with some calculation in javascript(see image)
The cell that is with red border calculate product price sum with vat.
What im trying to do but didnt success is to calculate product price sum WITHOUT VAT(the cell with red broder should be 2000 not 2200)
Here is the code that im using,
var row_no = (new Date).getTime();
var newTr = $('<tr id="row_' + row_no + '" class="row_' + item_id + '" data-item-id="' + item_id + '"></tr>');
tr_html = '<td><input name="product_id[]" type="hidden" class="rid" value="' + product_id + '"><input name="product[]" type="hidden" class="rcode" value="' + item_code + '"><input name="product_name[]" type="hidden" class="rname" value="' + item_name + '"><input name="product_option[]" type="hidden" class="roption" value="' + item_option + '"><input name="part_no[]" type="hidden" class="rpart_no" value="' + item_supplier_part_no + '"><span class="sname" id="name_' + row_no + '">' + item_code +' - '+ item_name +(sel_opt != '' ? ' ('+sel_opt+')' : '')+' <span class="label label-default">'+item_supplier_part_no+'</span></span> <i class="pull-right fa fa-edit tip edit" id="' + row_no + '" data-item="' + item_id + '" title="Edit" style="cursor:pointer;"></i></td>';
if (site.settings.product_expiry == 1) {
tr_html += '<td><input class="form-control date rexpiry" name="expiry[]" type="text" value="' + item_expiry + '" data-id="' + row_no + '" data-item="' + item_id + '" id="expiry_' + row_no + '"></td>';
}
tr_html += '<td class="text-right"><input class="form-control input-sm text-right rcost" name="net_cost[]" type="hidden" id="cost_' + row_no + '" value="' + item_cost + '"><input class="rucost" name="unit_cost[]" type="hidden" value="' + unit_cost + '"><input class="realucost" name="real_unit_cost[]" type="hidden" value="' + item.row.real_unit_cost + '"><span class="text-right scost" id="scost_' + row_no + '">' + formatMoney(item_cost) + '</span></td>';
tr_html += '<td><input name="quantity_balance[]" type="hidden" class="rbqty" value="' + item_bqty + '"><input class="form-control text-center rquantity" name="quantity[]" type="text" tabindex="'+((site.settings.set_focus == 1) ? an : (an+1))+'" value="' + formatQuantity2(item_qty) + '" data-id="' + row_no + '" data-item="' + item_id + '" id="quantity_' + row_no + '" onClick="this.select();"><input name="product_unit[]" type="hidden" class="runit" value="' + product_unit + '"><input name="product_base_quantity[]" type="hidden" class="rbase_quantity" value="' + base_quantity + '"></td>';
if (po_edit) {
tr_html += '<td class="rec_con"><input name="ordered_quantity[]" type="hidden" class="oqty" value="' + item_oqty + '"><input class="form-control text-center received" name="received[]" type="text" value="' + formatDecimal(unit_qty_received) + '" data-id="' + row_no + '" data-item="' + item_id + '" id="received_' + row_no + '" onClick="this.select();"><input name="received_base_quantity[]" type="hidden" class="rrbase_quantity" value="' + qty_received + '"></td>';
}
if (site.settings.product_discount == 1) {
tr_html += '<td class="text-right"><input class="form-control input-sm rdiscount" name="product_discount[]" type="hidden" id="discount_' + row_no + '" value="' + item_ds + '"><span class="text-right sdiscount text-danger" id="sdiscount_' + row_no + '">' + formatMoney(0 - (item_discount * item_qty)) + '</span></td>';
}
tr_html += '<td class="text-right"><span class="text-right ssubtotal" id="subtotal_' + row_no + '">' + formatMoney((parseFloat(item_cost) * parseFloat(item_qty))) + '</span></td>';
if (site.settings.tax1 == 1) {
tr_html += '<td class="text-right"><input class="form-control input-sm text-right rproduct_tax" name="product_tax[]" type="hidden" id="product_tax_' + row_no + '" value="' + pr_tax.id + '"><span class="text-right sproduct_tax" id="sproduct_tax_' + row_no + '">' + (pr_tax_rate ? '(' + pr_tax_rate + ')' : '') + ' ' + formatMoney(pr_tax_val * item_qty) + '</span></td>';
}
tr_html += '<td class="text-right"><span class="text-right ssubtotal" id="subtotal_' + row_no + '">' + formatMoney(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty))) + '</span></td>';
tr_html += '<td class="text-center"><i class="fa fa-times tip podel" id="' + row_no + '" title="Remove" style="cursor:pointer;"></i></td>';
newTr.html(tr_html);
newTr.prependTo("#poTable");
total += formatDecimal(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty)), 4);
count += parseFloat(item_qty);
an++;
if(!belong)
$('#row_' + row_no).addClass('warning');
});
var col = 2;
if (site.settings.product_expiry == 1) { col++; }
var tfoot = '<tr id="tfoot" class="tfoot active"><th colspan="'+col+'">Total</th><th class="text-center">' + formatQty(parseFloat(count) - 1) + '</th>';
if (po_edit) {
tfoot += '<th class="rec_con"></th>';
}
if (site.settings.product_discount == 1) {
tfoot += '<th class="text-right">'+formatMoney(product_discount)+'</th>';
}
tfoot += '<th class="text-right">'+formatMoney(total)+'</th>';
if (site.settings.tax1 == 1) {
tfoot += '<th class="text-right">'+formatMoney(product_tax)+'</th>';
}
tfoot += '<th class="text-right">'+formatMoney(total)+'</th><th class="text-center"><i class="fa fa-trash-o" style="opacity:0.5; filter:alpha(opacity=50);"></i></th></tr>';
$('#poTable tfoot').html(tfoot);

You set the total which you display right here:
total += formatDecimal(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty)), 4);
For you to display a price without vat you need another variable for it
var totalNoVAT = 0;
and in the loop:
totalNoVAT += formatDecimal((parseFloat(item_cost) * parseFloat(item_qty)), 4);
and finally display it by changing this:
tfoot += '<th class="text-right">'+formatMoney(total)+'</th>';
to this:
tfoot += '<th class="text-right">'+formatMoney(totalNoVAT)+'</th>';

Adding Dynamic Inputs , getting value from Dynamic dynamic generate input

I created a dynamic Form with JavaScript, with AddChapitre function and I want to get number value from an input text <input type="text" class="form-control" id="grandTitreNbr1">. And created "numbers value" inputs when I click to addChapitre button using AddFeild() function <button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button> .
The problem is when I click in addChapitre I get the The Chapitre Form hidden.
Here is it in JsFiddle : http://jsfiddle.net/javagose/6veqe55v/1/
This image will show the problem:
function addChapitre() {
var newdiv = document.createElement('div');
var addChapitre =
'<div class="panel panel-success"> <div class="panel-heading"> <h2 class="panel-title">' +
'<a data-toggle="collapse" data-target="#collapse" href="#collapse" class="collapsed">chapitre : ' + j +
' </a></h2></div><div class="panel-body" id="Chapitre' + j + '">';
newdiv.innerHTML += addChapitre;
addChapitre1 =
'<div class="panel-collapse" id="collapse' + j + '" >' +
'<form class="form-horizontal"><div class="form-group">' +
'<label for ="ChapTitre' + j + '">Titre du chapitre</label>' +
'<input type="text" class="form-control" id="ChapTitre' + j +
'" placeholder=" titre du chapitre ' + j + '"></div></form></div>';
newdiv.innerHTML += addChapitre1;
addChapitre2 =
'<div class="panel panel-success" id="grandTitres' + j + '">' +
'<div class="panel-heading"><h2 class="panel-title">' +
'<a data-toggle="collapse" data-target="#collapseTitre" ' +
'href="#collapseTitre" class="collapsed"> Grands titres des chapitre: ' + j + '</a></h2></div>';
newdiv.innerHTML += addChapitre2;
addChapitre2 =
'<div class="panel-body"><div class="panel-collapse" id="collapseTitre" >' +
'<form class="form-horizontal"><div class="form-group" id ="grandTitres1">' +
'<label for ="grandTitreNbr1"> GRAND TITRE</label>' +
'<input type="text " class="form-control" id="grandTitreNbr' + j + '">' +
'<button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button>' +
'<div id="grandTitresDiv' + j + '">' +
'</div></div> </form></div></div> </div></div></div>';
newdiv.innerHTML += addChapitre2;
document.getElementById('conteneur').appendChild(newdiv);
j++;
}
function addFields() {
var number = document.getElementById("grandTitreNbr" + j + "").value;
var container = document.getElementById("grandTitresDiv" + j + "");
for (i = 0; i < number; i++) {
// Append a node with a random text
var newdiv = document.createElement('div');
var grandTitreTxt =
'<input type="text" class="form-control" id="grandTitreTxt' + j +
'" name="grandTitreTxt' + j + '"></div>';
newdiv.innerHTML += grandTitreTxt;
var grandTitreUpload =
'<div class="checkbox"><label><input type="checkbox"> Pdf </label></div>' +
' <input type="file" name="fichier" id="fichier"' + j + ' accept="pdf" />';
newdiv.innerHTML += grandTitreUpload;
var grandTitreUpload =
'<div class="checkbox"><label><input type="checkbox">video </label>' +
'</div> <input type="file" name="fichier" id="fichier"' + j +
' accept="video" />';
newdiv.innerHTML += grandTitreUpload;
container.appendChild(newdiv);
// Append a line break
container.appendChild(document.createElement("br"));
}
}

Sum values Javascript

Here http://webmark.pt/sharepics/orders.png is the sales order layout (./sharepics/add.zip the full code) that I need to customize.
Problem:
Dynamically sum the cells between size 39 and 50, and put the value in the Pairs (quantity).
Already managed to add the lines, but the result is added to the lines immediately below.
The code that does this operation:
var newTr = $('<tr id="row_' + count + '"></tr>');
newTr.html('<td><input name="product' + count + '" type="hidden" value="' + item_code + '"><input class="span5 tran" name="item' + count + '" type="text" value="' + item_code + '"></td>
.......
<td><input class="input-block-level text-center" name="sort' + count + '" type="text" value="" id="sort-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="size39' + count + '" type="text" value="" id="size39-' + count + '" onClick="this.select();"></td>
......
<td><input class="input-block-level text-center" name="size50' + count + '" type="text" value="" id="size50-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="quantity' + count + '" type="text" value="1" id="quantity-' + count + '" onClick="this.select();"></td>
<td><input class="span2 tran" style="text-align:right;" name="unit_price' + count + '" type="text" id="price-' + count + '" value="' + item_price + '"></td>
<?php echo '<td><input class="span2 tran2" name="cart\'+ count +\'" type="text" value="" required="required" data-error="' . $this->lang->line("cart") . ' ' . $this->lang->line("is_required") . '"></td>';
if (DISCOUNT_OPTION == 2) {
echo '<td><select class="span2 select tran" data-placeholder="Select..." name="discount\' + count + \'" id="discount-\' + count + \'">';
foreach ($discounts as $discount) {
echo "<option value=" . $discount->id;
if ($discount->id == DEFAULT_DISCOUNT) {
echo ' selected="selected"';
}
echo ">" . $discount->name . "</option>";
}
echo '</select></td>';
}
?>
<td><input class="input-block-level text-center" name="subtotalpares' + count + '" type="text" value="" id="subtotalpares" disabled onClick="this.select();"></td>
<td><i class="icon-trash tip del" id="' + count + '" title="Remove this Item" style="cursor:pointer;" data-placement="right"></i></td>');
newTr.prependTo("#dyTable");
count++;
an++;
total += parseFloat(item_price);
$("input[id^=size]").keyup(function () {
var sum = 0;
$("input[id^=size]").each(function () {
sum += (parseInt(this.value) ? parseInt(this.value) : 1);
});
$("input[id^=quantity]").val(sum);
});
I look forward to some help!

getting undefined on a row.find jquery function

Why would I be getting an undefined in my console.log output when I update the quantity input box?
I have tried various ways but unable to return the value entered in the input box.
counter = $('#myTable tr').length;
var newRow = $("<tr>");
var cols = "";
cols += '<td row-id="' + counter + '"></td>';
cols += '<td row-id="' + counter + '">Display row counter here</td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="material_id_' + counter + '" readonly="true" name="material_id_' + counter + '" style="width:150px" required><span class="btn btn-default btn-sm input-group-addon search_material_modal" id="" onclick="displaymaterialmodal(' + counter + ')" ><span class="glyphicon glyphicon-eye-open" title="' + counter + ' "></span></span></div></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"></div></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="myInputbox form-control input-sm" id="quantity" name="quantity" style="width:70px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="bar_code" name="bar_code" style="width:150px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="invoice_number" name="invoice_number" style="width:150px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="unit_price" name="unit_price" style="width:100px"></td>';
cols += '<td row-id="' + counter + '"><select name="where_found" id="where_found" style="height:30px"><option value="" selected></option><option value="Retour client"><cfoutput>#textconstants.customer#</cfoutput></option><option value="Controle recption"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><select name="shipment" id="shipment" style="height:30px" class="myInputbox"><option value="" selected></option><option value="Pallette"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="Container"><cfoutput>#textconstants.container#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="remarks" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>';
cols += '<td row-id="' + counter + '"><select name="rework" id="rework" style="height:30px" class="myInputbox"><option value="" selected></option><cfoutput><option value="#textconstants.no_rework#">#textconstants.no_rework#</option><option value="#textconstants.failed_rework#">#textconstants.failed_rework#</option><option value="#textconstants.rework_ok#">#textconstants.rework_ok#</option></cfoutput></select></td>';
cols += '<td row-id="' + counter + '"><select name="status" id="status" style="height:30px" class="myInputbox"><cfoutput><option value="" selected></option><option value="#textconstants.credit_note#">#textconstants.credit_note#</option><option value="#textconstants.replacement#">#textconstants.replacement#</option><option value="#textconstants.no_action#">#textconstants.no_action#</option></cfoutput></select></td>';
cols += '<td row-id="' + counter + '"><button type="button" class="btn btn-default btn-sm" onclick="addphotos(' + counter + ')"><span class="glyphicon glyphicon-camera"></span></button></td>';
newRow.append(cols);
counter++;
$("table.order-list").append(newRow);
$('#url_total_rows').val(parseInt($('#url_total_rows').val(), 10) + 1);
});
$("#myTable tbody").on("change", ".myInputbox", function(){
var row = $(this).closest("tr");
var tb1 = row.find("input.quantity").val();
console.log(tb1);
});
Any help appreciated.

row.find("input.quantity").val();
ref to an input with CLASS quantity, maybe you want
$("#quantity").val()