We Keep Coding

javascript scripts not working in electron

I am trying to work on electron and made a simple dashboard GUI. i am a beginner in node js and electron.
Problem:
in my main gui.html: i have a table is being loaded, and from that table i need to select the rows from checklist for which i have made a js script:
script in read_checklist.js, this is taking the input checkbox element and selecting the whole row, which will later be shown after some processing in the textarea.
var checkboxes = document.getElementsByTagName("input");
var select_all = document.getElementById("allcb");
var warn_code = Array();
var family_array = Array();
var fail_drive_array = Array();
var waiverMap = {};
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var Warn_Code = currentRow.getElementsByTagName("td")[0];
var Family = currentRow.getElementsByTagName("td")[1];
var failing_drive = currentRow.getElementsByTagName("td")[3];
warn_code.push(Warn_Code.textContent);
family_array.push(Family.textContent);
fail_drive_array.push(failing_drive.textContent);
console.log('server started!' + currentRow );
alert(currentRow.textContent);
};
}
I am trying to import this in my gui.html like this:
This is where the table is getting displayed (code for this is below and it is stored in the renderer.js)
<!--This is for the table-->
<div id="data_lib" class="table-responsive">
</div>
<script type="text/javascript" src="./read_checklist.js"></script>
<!--This is for the table-->
My table is coming from another file, renderer.js
$(document).ready(function(){
var data;
$.ajax({
type: "GET",
url: "/Users/mrimat01/Desktop/CODE/electron_QAB_GUI_main/GUI/data.csv",
dataType: "text",
success: function(response)
{
data = $.csv.toArrays(response);
generateHtmlTable(data);
}
});
function generateHtmlTable(data) {
var html = "<table id='big_tables' class='table table-striped table-bordered' method='GET'>";
if(typeof(data[0]) === 'undefined') {
return null;
} else {
$.each(data, function( index, row ) {
//bind header
if(index == 0) {
html += '<thead>';
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<th>';
html += colData;
html += '</th>';
});
html += '<th>';
html += "<input type='checkbox' id='allcb' name='allcb'/>Select";
html += '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
} else {
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<td>';
html += colData;
html += '</td>';
});
html += '<td>';
html += "<input id='name' type='checkbox' name='name' value='name' /> ";
html += '</td>';
html += '</tr>';
}
});
html += '</tbody>';
html += '</table>';
$('#data_lib').append(html);
}
}
});
I can see the table getting generated but read_checklist.js desn't work.
If i try to do the same thing in console, it works perfectly.
i have gone through many SO answers but couldn't seem to make this work.
Things i have tried:
making node_integration: true
using
module = undefined;}</script>
<script>if (window.module) module = window.module;</script>
adding the script directly below root <div>

how to get the text inside the dynamically rendered items on the click of the button?

I am displaying the content after fetching it via ajax using jquery so the content is dynamic,
var i, j;
var product_names = [];
var product_image = [];
var product_rate = [];
var product_amount = [];
var product_category = [];
$.ajax({
url: BASE_URL + '/getOrgServices?orgId=' + orgId,
type: 'GET',
success: function(result) {
//console.log(result);
for (i in result) {
product_names[i] = result[i].name;
product_image[i] = result[i].imgurl;
product_rate[i] = result[i].rate;
product_amount[i] = result[i].amount;
product_category[i] = result[i].categories;
}
for(i in product_category){
var html = '<div class="prod-content"><ul id="products">';
html += '<li class="row product-listing">';
html += '<div class="product-img-container"><img class="product-img" src="' + product_image[i] + '"></div>';
html += '<div class="container product-listing-details"><h6 id="product-title">' + product_names[i] + '</h6><div id="product-description">' + product_amount[i] + '</div><br><div id="product-cost">' + product_rate[i] + '</div></div>';
html += '<div id="product-add">';
html += '<button class="add-button" type="button" role="button">ADD</button>';
html += '<span class="quantity"><input class="item-quantity" type="number" value="0" min="0" max="50" step="1"></span>';
html += '</div></li> </ul></div>'
//adding elements to all category
var id_str = '#' + new_id[0];
$(id_str).append(html);
}
}
Now in the below function i want to access the name of one h6 product_name at a time so is there any method to do so like if I could select
$(".add-button").click(function() {
//here i want to add items to cart on button click (means the button clicked its corresponding item should be added to cart )
});
is the cart part of the html code
<div class="order">
<ul id="products">
<li>
//here i want to append the added item
</li>
</ul>
</div>

To get all h6 you can do similar thing as below, without jQuery.
$(".add-button").click(function() {
console.log("click");
document.querySelectorAll("div.prod-content h6").forEach((function(elem) {
console.log(elem.innerText);
if (parseInt(elem.innerText) > 0) {
console.log(elem);
}
}));
});

my input return me undefined even though the data is catch. using CRUD js

<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries');
this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "popultns" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var pop = el2.value;
if (country2)
{ // Add the new value
loadTableData.push(country2.trim() );
// Reset input value
el.value = '';
//el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
the image is the ui tht im working for the function
I'm supposed to auto-generate the table based on the data available from my main.js script which is in JSon format. There is no problem with the data loading since the data can be display in my html file. However, the problem comes whn my data is returned undefined on my auto generated table whn i click the 'add' button to update the data in the table. Whn i click in the edit button, the data is get correctly. only whn the display, it returns me undefined.

i know how alrdy.
here i attach the code & sample of the data i hv done.
hopefully this would help fresh grad like me who hv trouble in undrsntdng CRUD
<html>
<head>
<meta charset="UTF-8">
<title>Countries CRUD</title>
<style>
input[type='submit'], button, [aria-label]{
cursor: pointer;
}
#spoiler{
display: none;
}
</style>
</head>
<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries' && 'popultns');
//this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "populations" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var popltn = el2.value;
if (country2 && popltn )
{ // Add the new value
//loadTableData.push(country2.trim() );
loadTableData.push({country: country2, population:popltn});
// Reset input value
el.value = '';
el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
this.Edit = function (item)
{ var el3 = document.getElementById('edit-name');
var el4 = document.getElementById('edit-popu');
// Display value in the field
let index = item;
el3.value = loadTableData[index].country;
el4.value = loadTableData[index].population;
// Display fields
document.getElementById('spoiler').style.display = 'block';
self = this;
document.getElementById('saveEdit').onsubmit = function()
{
// Get value
var country2 = el3.value;
var popltn = el4.value;
//console.log({country2, pop});
if (country2 || pop)
//console.log(country2);
{ // Edit value (strt,del,replace)
console.log(country2,popltn);
console.log(index, 1,({country2,popltn}));
//update array
loadTableData[index].country = el3.value;
loadTableData[index].population = el4.value;
//self.loadTableData.splice(index, 1,({country2,popltn}));
//console.log(index, 1, pop.trim());
//self.loadTableData.splice(index, 1, pop.trim());
// Display the new list
self.FetchAll();
// Hide fields
CloseInput();
}
}
};
this.Delete = function (item)
{
// Delete the current row
loadTableData.splice(item, 1);
// Display the new list
this.FetchAll();
};
}
app.FetchAll();
function CloseInput()
{ document.getElementById('spoiler').style.display = 'none';}
</script>
</body>
</html>

Adding a new row to a table in jQuery but apply unique ID to input names

so im building an invoice tool and i need to be able to add a new row so add a new product which contain inputs with names and id values.
I have the following JS which is creating the new rows perfectly for me however any ideas how i can adjust so it finds name="blah" and id="blah" on inputs and select lists and adds to the end _1, _2, _3 etc... numbers being for each new row.
JS:
// add new product row on invoice
$(".add-row").click(function () {
$("#invoice_table").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
return false
});

You can use the index available in your $.each... like:
$(".add-row").click(function () {
$("#invoice_table").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function (index, element) {
var html = $(this).html().replace(/blah/g, 'blah_'+index);
tds += '<td>' + html + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
return false
});

You can use counter for it
$("#invoice_table").each(function () {
var count=0;
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
var count=count+1;
tds += '<td id="blah'+counter+'" name="blah'+counter+'">' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
return false
So that everytime it creates a unique identifier

Search mechanism is not working in Html Table

Im working on search mechanism in html, it is working when i search the data at first time. if i search for next data, it wont search as expected. If i search with empty data, it wont display actual table(which displayed at initial time).
JsFiddle : http://jsfiddle.net/DHJ79/
Even any better pointer is also welcome, if my below code is not good.
My code:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style> td{border: thin solid;} </style>
<script type="text/javascript">
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
function addList(){
var table = "";
table += "<table class='table'>";
table += "<tr>";
table += "<td>S.no</td>";
table += "<td>Name</td>";
table += "<td>Gender</td>";
table += "</tr>";
for(i=0; i<10; i++) {
table += "<tr>";
table += "<td>"+i+"</td>";
table += "<td>Name"+i+"</td>";
table += "<td>"+( i > 5 ? "Male" : "Female")+"</td>";
table += "</tr>";
}
table += "</table>";
var body = document.getElementById("ListContainer");
body.innerHTML = table;
}
</script>
</head>
<body onload="addList();">
<input id="Button1" type="button" value="button" onclick="searchTable();" />
<input id="searchdata" type="text" />
<div id="ListContainer" > </div>
</body>
</html>
Advance thanks...

Maybe something like this.
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if (inputVal == "") {
$('.hideThis').removeClass('hideThis');
} else {
$('tr').addClass('hideThis');
$('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
}
}

modify your search function as follows:
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if(inputVal){ //check for valid searches
//addList();
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
else{
addList(); // if you don't want to reinitialize table on empty searches skip this
}
}