We Keep Coding

how to check if a html table has duplicated rows in js and sum inputs instead of insert another row?

I'm learning JS while doing a POS System, and I'm having a hard time trying to figure out how to check if the product added is already scanned before inserting and if so, change the quantity input instead.
So far when I scan the product id it inserts without a problem, but when I scan the same id it inserts in a new row. It seem that my function comprobacion isn't working. I tried with other using a for to search in the rows, and I tried some solutions that I found online but nothing seems to work.
here is an example of what its happening
https://gfycat.com/respectfultemptingeastrussiancoursinghounds
idProductos is the primary key and is hidden in the rows, so im introducing codigo (it's another unique column, both cannot be null).
Can someone help me? I'm lost.
This is my code
$.ajax({
method: "POST",
url: "../php/venta.php",
data: param,
success: function(data) {
if (data != null) {
var idProductos,
Codigo,
nombre,
precioVenta;
// console.log(data);
var rows = jQuery.parseJSON(data);
idProductos = rows[0].idProductos;
Codigo = rows[0].Codigo;
nombre = rows[0].nombre;
precioVenta = rows[0].precioVenta;
(idProductos)
if (comprobacion(idProductos) == false) {
var nuevoValor = $(parseInt($('.inputCantidad')[i]).val()) + 1;
$($('.inputCantidad')[i]).val(nuevoValor);
var valorImporte = $($('.inputprecioVenta')[i]).val() * nuevoValor;
$($('.inputImporte')[i]).val(valorImporte);
} else {
var table = document.getElementById('tablaVenta');
var newRow = document.createElement("tr");
newRow.align = "center";
var contentRow =
'<td><input type="hidden" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
'<td>' + nombre + '</td>' +
'<td><input class="inputprecioVenta" value="' + precioVenta + '"></td>' +
'<td><input class="inputCantidad" value="1"></td>' +
'<td><input class="inputImporte" value="' + precioVenta + '"></td>';
newRow.innerHTML = contentRow;
table.appendChild(newRow);
}
}
},
error: function(jqXHR, textStatus, errorThrown) { //errores
alert(jqXHR + textStatus + errorThrown);
},
})
}
the function comprobacion
function comprobacion(idProductos) {
var id = $(idProductos).val();
$('tbody tr').each(function() {
if ($(this).val() == id) {
return false;
}
});
return true;
}

I would add the id to the row using a custom data attribute, like data-id, and use that, along with some clever selector creation to quickly identify if the id has been used before.
$.ajax({
method: "POST",
url: "../php/venta.php",
data: param,
success: function(data) {
if (data != null) {
var idProductos,
Codigo,
nombre,
precioVenta;
// console.log(data);
var rows = jQuery.parseJSON(data);
idProductos = rows[0].idProductos;
Codigo = rows[0].Codigo;
nombre = rows[0].nombre;
precioVenta = rows[0].precioVenta;
(idProductos)
if (comprobacion(idProductos) == false) {
var nuevoValor = $(parseInt($('.inputCantidad')[i]).val()) + 1;
$($('.inputCantidad')[i]).val(nuevoValor);
var valorImporte = $($('.inputprecioVenta')[i]).val() * nuevoValor;
$($('.inputImporte')[i]).val(valorImporte);
} else {
var table = document.getElementById('tablaVenta');
var newRow = document.createElement("tr");
newRow.align = "center";
/* Add the line below */
newRow.setAttribute("data-id", idProductos);
var contentRow =
'<td><input type="hidden" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
'<td>' + nombre + '</td>' +
'<td><input class="inputprecioVenta" value="' + precioVenta + '"></td>' +
'<td><input class="inputCantidad" value="1"></td>' +
'<td><input class="inputImporte" value="' + precioVenta + '"></td>';
newRow.innerHTML = contentRow;
table.appendChild(newRow);
}
}
},
error: function(jqXHR, textStatus, errorThrown) { //errores
alert(jqXHR + textStatus + errorThrown);
},
})
Then, the comprobacion function becomes easier:
function comprobacion(idProductos) {
return $('tbody tr[data-id="' + idProductos + '"]').length === 0;
}

Set id to HTML inputs, is more quick to find ProductID with JS.
'<td><input type="hidden" id="hid_' + idProductos + '" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
'<td>' + nombre + '</td>' +
'<td><input id="hid_' + idProductos + '" class="inputprecioVenta" value="' + precioVenta + '"></td>' +
'<td><input id="qty_' + idProductos + '" class="inputCantidad" value="1"></td>' +
'<td><input id="cst_' + idProductos + '" class="inputImporte" value="' + precioVenta + '"></td>';

Try $('tbody tr td').each(function().
The value is in the td, not the tr

How to display all the data from table?

1.This is my code for my HTML table where I'm unable to display the data from it using my javascript code below.
<table id="empTable">
<tr>
<th>Type</th>
<th>SimiScore</th>
<th>Rank</th>
<th>Introversion/Extraversion</th>
<th>Intuitive/Observant</th>
<th>Thinking/Feeling</th>
<th>Judging/Perceiving</th>
</tr>
{% for doc in docs %}
<tr>
<td>{{doc["type"]}}</td>
<td>{{doc["Simiscore"]}}</td>
<td>{{doc["Rank"]}}</td>
<td>{{doc["Introversion/Extraversion"]}}</td>
<td>{{doc["Intuitive/Observant"]}}</td>
<td>{{doc["Thinking/Feeling"]}}</td>
<td>{{doc["Judging/Perceiving"]}}</td>
</tr>
{% endfor %}
</table>
<p><input type="button" id="bt" value="Show Table Data" onclick="showTableData()" /></p>
<p id="info"></p>
2.This is my javascript code to display the data, but I'm unable to display it
<script>
function showTableData() {
document.getElementById('info').innerHTML = "";
var myTab = document.getElementById('empTable');
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (i = 1; i < myTab.rows.length; i++) {
// GET THE CELLS COLLECTION OF THE CURRENT ROW.
var objCells = myTab.rows.item(i).cells;
// LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
for (var j = 0; j < objCells.length; j++) {
info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}
info.innerHTML = info.innerHTML + '<br />'; // ADD A BREAK (TAG).
}
}
</script>

{
$(document).ready(function()
{
$.ajax({
url: "getjson.php",
type: "POST",
dataType:"json",
success: function (response)
{
var trHTML = '';
$.each(response, function (key,value) {
trHTML +=
'<tr><td>' + value.id +
'</td><td>' + value.konu +
'</td><td>' + value.aciklama +
'</td><td>' + value.giris_tarih +
'</td><td>' + value.degistirilme_tarih +
'</td><td>' + value.ad_soyad +
'</td><td>' + value.email +
'</td></tr>';
});
$('#records_table').append(trHTML);
}
});
});
}
this is an example you can use

how to create a hierarchy table with parent child rows razor

here is my table snap enter image description here
I am creating this table from my model in razor view
it shows the structure of task and sub-tasks and their subtask ...
but the problem is it loads sub task and their subtask ... in the same level when someone clicks on the first column it loads its child under the parent
it's loads them and add a table row under the correspondence row
here is my jquery code I want to make it hierarchical like there should be a difference in parent and child level
function showHierarchy(taskId) {
if ($('.subtaskof_' + taskId).text() == '') {
$.ajax('/Tasks/sfsubtasks?taskId=' + taskId, // request url
{
async: false,
success: function (data, status, xhr) {// success callback function
var subtasklist = JSON.parse(data)
console.log(subtasklist);
for (i = 0; i < subtasklist.length; i++) {
subtask = subtasklist[i];
var therowis = '<tr class=subtaskof_' + taskId + '>'
+ '<td id="subtaskrow_' + subtask['InstanceId'] + '" align="right">_</td>'
+ '<td>' + subtask['InstanceId'] + '</td>'
+ '<td>' + subtask["Title"] + '</td>'
+ '<td>' + subtask["Deliverables"] + '</td>'
+ '<td>' + subtask["StartDate"] + '</td>'
+ '<td>' + subtask["Priority"] + '</td>'
+ '<td>' + subtask["State"] + '</td>'
+ '<td>See Details_subt</td>'
+ '<td>Add Sub Task_subt</td>'
+ '</tr>'
// Find position to add new subtask row in the Task table
$("#my-grid tr").filter(function () {
if ($(this).text().indexOf(taskId) >= 0) {
$(this).after(therowis);
issubsubtaskexists = false;
console.log("chield checking for - " + subtask['InstanceId'])
$.ajax('/Tasks/sfsubtasks?taskId=' + subtask['InstanceId'], // request url
{
async: false,
success: function (data_, status_, xhr_) {
if (data_.length > 0) {
console.log("The data_ is - " + data_);
var subsubtasklist = JSON.parse(data_);
console.log("The subsubtasklist is - " + subsubtasklist)
console.log("lenght for - " + subtask['InstanceId'] + " , is - " + subsubtasklist);
if (subsubtasklist.length > 0) {
$('#subtaskrow_' + subtask['InstanceId']).html("<b><a style='font-size:25px; padding-left:17px;' id='lnk_" + subtask['InstanceId'] + "' href='#' onclick='showHierarchy(" + subtask['InstanceId'] + ")'> + </a></b>")
issubsubtaskexists = true;
}
}
}
});
console.log("The taskId is - "+taskId)
$('#lnk_' + taskId).html('<b>_</b>');
}
});
}
}
});
} else {
// Toggle/removing subtasks
$('.subtaskof_' + taskId).remove();
$.ajax('/Tasks/sfsubtasks?taskId=' + taskId,
{
success: function (data, status, xhr) {
console.log("Checking for child node of taskId - " + taskId);
var subsubtasklist = JSON.parse(data)
console.log(subsubtasklist);
for (i = 0; i < subsubtasklist.length; i++) {
$('.subtaskof_' + subsubtasklist[i]['InstanceId']).remove();
$.ajax('/Tasks/sfsubtasks?taskId=' + subsubtasklist[i],
{
success: function (data, status, xhr) {
console.log("Checking for child node of taskId - " + taskId);
var subsubtasklist_ = JSON.parse(data)
console.log(subsubtasklist_);
for (j = 0; j < subsubtasklist_.length; j++) {
$('.subtaskof_' + subsubtasklist_[j]['InstanceId']).remove();
}
}
});
}
}
});
$('#lnk_' + taskId).html('<b>+</b>');
}
}
plz let me know what can be done of this table for showing data hierarchically

Making use of HTTP request param in GET call using AJAX

I am writing an HTML page to make a GET call constructing the URL with HTTP request param (driverid) to my underlying microservice using AJAX and display results in tabular format in the corresponding divs like below:
<html>
<head>Driver App
</head>
<body>
<form name="submitform" id="submitform">
<input type="submit" value="Refresh">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var driverid = get("driverid");
$('[name="submitform"]').submit(function (e) {
e.preventDefault();
$.ajax({
url: "http://localhost:7777/driver/" + driverid + "/ride",
dataType: 'json',
type: "GET",
success: function (result) {
//alert(result);
var waitingHtml = '<table>';
var ongoingHtml = '<table>'
var completedHtml = '<table>';
$.each(result.data, function (i, item) {
if (item.status == 0) {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
});
trHTML +="</table>";
$("#WaitingHolder").html(trHTML);
} else if (item.status == 1) {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
});
trHTML +="</table>";
$("#OngoingHolder").html(trHTML);
} else {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
});
trHTML +="</table>";
$("#CompletedHolder").html(trHTML);
}
}
}
}).done (function(data) { });
});
</script>
<table>
<tr><th>Waiting</th><th>Ongoing</th><th>Completion</th><tr>
<tr>
<td><div id="WaitingHolder">
</div></td>
<td><div id="OngoingHolder">
</div></td>
<td><div id="CompletedHolder">
<div></td>
</tr>
</table>
</body>
</html>
Here are the sample data which I will be printing in the corresponding div blocks in tabular format:
{
"data": [
{
"requestId": 44,
"customerId": 234,
"requestTime": 1502652444000,
"status": 2,
"driverId": 5,
"startTime": 1502652444000,
"endTime": 1502652744000
},
{
"requestId": 52,
"customerId": 234234,
"requestTime": 1502658544000,
"status": 2,
"driverId": 5,
"startTime": 1502658544000,
"endTime": 1502658844000
}
]
}
On making the request, the page just loads with no error in console. Also there is no HTTP call made to the backend. I am not able to fix it with my limited HTML/JS expertise. Can someone help me in getting this fixed?

there are some logical errors in your code, i have sorted,
<html>
<head>Driver App
</head>
<body>
<form name="submitform" id="submitform">
<input type="submit" value="Refresh">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var driverid = get("driverid");
$('[name="submitform"]').submit(function (e) {
e.preventDefault();
$.ajax({
url: "http://localhost:7777/driver/" + driverid + "/ride",
dataType: 'json',
type: "GET",
success: function (result) {
//alert(result);
var waitingHtml = '<table>';
var ongoingHtml = '<table>'
var completedHtml = '<table>';
$.each(result.data, function (i, item) {
if (item.status == 0) {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
waitingHtml += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
} else if (item.status == 1) {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
ongoingHtml += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
} else {
var requestTime;
if (item.requestTime != 0) {
requestTime = new Date(item.requestTime);
}
var startDate;
if (item.startTime != 0) {
startDate = new Date(item.startTime);
}
var endDate;
if (item.endTime != 0) {
endDate = new Date(item.endTime);
}
trHTML += '<tr><td>' + item.requestId + '</td><td>' + item.customerId + '</td><td>' + requestTime + '</td><td>' + status + '</td><td>' + item.driverId + '</td><td>' + startDate + '</td><td>'
+ endDate + '</td></tr>';
}
});
waitingHtml+='</table>';
$("#WaitingHolder").html(waitingHtml);
ongoingHtml+='</table>';
$("#OngoingHolder").html(ongoingHtml);
completedHtml+='</table>';
$("#CompletedHolder").html(completedHtml);
}
});
</script>
<div id="WaitingHolder"></div>
<div id="OngoingHolder"></div>
<div id="CompletedHolder"></div>
</body>
</html>

Adding options to dynamically generated select tag

I am facing issues while adding the options in the select that I am generating dynamically using jQuery. I am fetching options from the database and I want to show all those options for each dynamically generated select tag.
Please tell me what i am doing wrong in my code?
Here is my function to add new row :
function addnewrow() {
var n = ($('.detail tr').length - 0) + 1;
var tr = '<tr>' +
'<td class="no">' + n + '</td>' +
'<td><input type="checkbox" class="till_check" name="till_check[' + till_check_counter + ']" id="prdct_till_check[' + till_check_counter + ']"></td>' +
'<td><select class="form-control barcode dyselect['+product_barcode_counter+']" name="barcode[' + product_barcode_counter + ']" id="prdct_barcode[' + product_barcode_counter + ']">'+'<option>Please select a bar code</option>'+'</select></td>' +
'<td><input type="text" class="form-control productname" id="brcode_product" name="productname[' + product_name_counter + ']" id="prdct_name[' + product_name_counter + ']"></td>' +
'<td><input type="text" class="form-control sm" name="sm[' + sm_counter + ']" id="prdct_sm[' + sm_counter + ']"></td>' +
'<td><input type="text" class="form-control spl" name="spl[' + spl_counter + ']" id="prdct_spl[' + spl_counter + ']"></td>' +
'<td><input type="text" class="form-control quantity" name="quantity[' + product_quantity_counter + ']" id="prdct_qty[' + product_quantity_counter + ']"></td>' +
'<td><input type="text" class="form-control price" name="price[' + product_price_counter + ']" id="prdct_price[' + product_price_counter + ']"></td>' +
'<td><input type="text" class="form-control discount" name="discount[' + product_discount_counter + ']" id="prdct_discount[' + product_discount_counter + ']"></td>' +
'<td><input type="text" class="form-control amount" name="amount[' + product_amount_counter + ']" id="prdct_amount[' + product_amount_counter + ']"></td>' +
'<td><a href="#" class="remove">Delete</td>' +
'</tr>';
$('.detail').append(tr);
//increamenting the counter
++till_check_counter;
++product_name_counter;
++product_quantity_counter;
++sm_counter;
++spl_counter;
++product_price_counter;
++product_discount_counter;
++product_amount_counter;
//setting the validation rules for every product attribute by calling the function
createValidation();
get_barcodes();
}
Here is the function for getting barcodes from database :
function get_barcodes() {
$.ajax({
url: 'http://localhost/retail/main/ajax_barcodes/',
type: 'POST',
datatype: 'json',
data: {
'barcode': $('#brcode option:selected').val()
},
success: function(data) {
/*var obj = JSON.parse(data);
console.log(obj.brcode.name);*/
var myselect = $('.dyselect[' + product_barcode_counter + ']');
var barcodes = JSON.parse(data);
for (var i = 0; i < barcodes.brcode.length; i++) {
//console.log(barcodes.brcode[i].name);
//console.log(barcodes.brcode[i].barcode);
var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');
console.log(options);
// $('.dyselect['+product_barcode_counter+']').append("Hello world");
$('.dyselect').text('dfsgfisdgfsiudfgsdf');
}
}
});
}
Please do not consider the commented code.

You are not appending your options to the DOM anywhere.
myselect.append(options); // Missing this line
You are incrementing your ++product_barcode_counter after adding a row
//increamenting the counter
++till_check_counter;
++product_name_counter;
++product_quantity_counter;
++sm_counter;
++spl_counter;
++product_price_counter;
++product_discount_counter;
++product_amount_counter;
so, by the time you are accessing the product_barcode_counter inside the ajax success its incremented.
Here,
your var myselect = $('.dyselect_' + product_barcode_counter); selection is wrong it is returning nothing.
You have to bind your id to the ajax so that you can read the value on ajax success.
$.ajax({
url: 'http://localhost/retail/main/ajax_barcodes/',
type: 'POST',
datatype: 'json',
data: {
'barcode': $('#brcode option:selected').val()
},
success: function(id,data) {
//Here id is what you need to use to select the correct select.
}.bind(this,product_name_counter-1)
);
JS
function get_barcodes() {
$.ajax({
url: 'http://localhost/retail/main/ajax_barcodes/',
type: 'POST',
datatype: 'json',
data: {
'barcode': $('#brcode option:selected').val()
},
success: function(id,data) {
var myselect = $('.dyselect_' + id);
var barcodes = JSON.parse(data);
for (var i = 0; i < barcodes.brcode.length; i++) {
var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');
myselect.append(options); // Missing this line
}
}.bind(this,product_name_counter-1)
});
}
OR you can use closure
success: (function(id){
return function(data) {
//Here id is what you need to use to select the correct select.
}
})(product_name_counter-1);
JS
function get_barcodes() {
$.ajax({
url: 'http://localhost/retail/main/ajax_barcodes/',
type: 'POST',
datatype: 'json',
data: {
'barcode': $('#brcode option:selected').val()
},
success: (function(id){
return function(data) {
var myselect = $('.dyselect_' + id);
var barcodes = JSON.parse(data);
for (var i = 0; i < barcodes.brcode.length; i++) {
var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');
myselect.append(options); // Missing this line
}
}
}
})(product_name_counter-1);
});
}