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>
Related
So, I have an UL which is empty. By clicking on a button, list-items (li) will be added to the ul. All these items do have a header (h1). The header of each item, has to get it's index from the list. So the second li needs to have a header with the number 2, and the third with the number 3.
I've searched the internet for a while for proper solutions, but wasn't able to find one. Now I have created a small piece of code which, in my opinion, should work. But it doesn't. Below is the JavaScript (jQuery) code which adds the items to the list, but also sets it's header.
/*Give all list items a name*/
function AddName() {
var list = $("#jrn_form_input_list");
for (var i = 0; i < 5; i++) {
var index = $("li").index(list[i]);
var header = "Journey leg: " + index;
$(list[i]).find("h1").text(header);
}
};
/*Add journy leg*/
$("#jrn_add_leg_btn").click(function() {
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">"TEST_LEG_NAME"</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
AddName();
});
So the function AddName() doesn't work. Is there anyone who knows how to do this properly in JavaScript/jQuery?
In this example all 5 list items are added at once.
$( "#jrn_add_leg_btn" ).click(function()
{
for (var i = 0; i < 5; i++)
{
var j = i + 1;
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">Journey leg:'+ j +'</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id = "jrn_add_leg_btn" >click</button>
<ul id='jrn_form_input_list'></ul>
I'm working on a small project, I was asked to create a small splash table. In the splash table they want to know if one of the services in a server is online or not(since not everyone has access to the servers). so I was ask to create a html table from a CVS in which I accomplish by using the code below
< script type = "text/javascript" >
$.get('test3.csv', function(data) {
var build = '<table>\n';
var rows = data.split("\n");
rows.forEach(function getvalues(thisRow) {
build += "<tr>\n";
var columns = thisRow.split(",");
for (var i = 0; i < columns.length; i++) {
build += "<td>" + columns[i] + "</td>\n";
}
build += "</tr>\n";
})
build += "</table>";
$('#container').append(build);
});
<div id="container"></div>
it creates the table and everything is fine with the code. but what I need is to "replace" the X that are alone with an image like a green bubble.
the CVS file is set-up like this:
IP, Server Name, Function1, function2, function3
000000, Test1, X,,,
If anyone could, it would be appreciate.
Thanks
Make a function that checks if the column value is "X" and returns the image. Something like replaceValueX(columns[i]) and then the function just has something like
$.get('test3.csv', function(data) {
var build = '<table>\n';
var rows = data.split("\n");
rows.forEach(function getvalues(thisRow) {
build += "<tr>\n";
var columns = thisRow.split(",");
for (var i = 0; i < columns.length; i++) {
build += "<td>" + replaceValueX(columns[i]) + "</td>\n";
}
build += "</tr>\n";
})
build += "</table>";
$('#container').append(build);
});
function replaceValueX(columnValue) {
if(columnValue == "X"){
return "<img src='greenbubble.png'>";
}else {
return columnValue;
}
}
I have a problem with JSON data: I want make news feed via JSON URL, but the information not showing in HTML.
$(function() {
var entries = [];
var dmJSON = "http://www.stellarbiotechnologies.com/media/press-releases/json";
$.getJSON( dmJSON, function(data) {
var html = '<div class="panel-body"><h3 class="lead">${title}</h3>';
html += '<time datetime="${published}">';
html += '<span class="glyphicon glyphicon-time"></span> ';
html += '<span class="month">${monthName}</span> ';
html += '<span class="day">${day}</span>, ';
html += '<span class="year">${year}</span></time></div>';
$('#ticker').html
},
<div id="ticker"></div>
You could do something like this:
<script>
$(document).ready(function() {
var dmJSON = "http://www.stellarbiotechnologies.com/media/press-releases/json";
$.getJSON( dmJSON, function(data) {
var html = '';
// loop through all the news items, and append the
// title and published date to the html variable.
for(var i = 0; i < data.news.length; i++){
html += '<div>';
html += data.news[i].title
html += '<br>';
html += data.news[i].published
html += '</div>';
}
// append all the html variable to the ticker div.
$("#ticker").append(html);
});
});
</script>
This will loop through the news node, and get the title and the published date and then append them to the page (an element with the id of ticker.
I have multiple XML files which contain TV Listings each file is one TV channel. I want to be able to search by program title and display the results in a html table. So far I have been able to search by one XML file - so by one channel. I want to be able to search by multiple channels using user input via an input box and search button. The XML I have looks like:
<?xml version="1.0" encoding="UTF-8"?>
<channel id="sky_one" source="Sky" date="25/11/2014">
<programme>
<desc>Tony's motorcycle bursts into flames between his legs while town planner Liz is left in agony after her half-tonne horse bolts and lands on top of her. Also in HD</desc>
<title>The Real A & E</title>
<end>0630</end>
<start>0600</start>
</programme>
(only a snippet)
The jQuery that I have so far, which works for one channel looks like:
$(document).ready(function () {
//GLOBAL VAR
var keyword = '';
var pub = '';
var i = 0;
$("#searchButton").click(function () {
keyword = $("input#term").val();
//Reset any message
var errMsg = '';
pub = '';
if (keyword == '') {
errMsg += 'Please enter a search term';
} else {
searchThis();
}
if (errMsg != '') {
pub += '<div class="error">';
pub += errMsg;
pub += '</div>';
}
//Show error
$('#result').html(pub);
});
// ----------------------------------------- SKY NEWS -----------------------------------------------------------
function searchThis() {
$.ajax({
type: "GET",
url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
dataType: "xml",
success: function (xml) {
loadPublication(xml)
}
});
}
function loadPublication(xmlData) {
i = 0;
var row;
var searchExp = "";
$(xmlData).find('programme').each(function () {
var title = $(this).find('title').text();
var desc = $(this).find('desc').text();
var start = $(this).find('start').text();
//Format the keyword expression
var exp = new RegExp(keyword, "gi");
//Match to Title of programme
searchExp = title.match(exp);
if (searchExp != null) {
//Start building the result
if ((i % 2) == 0) {
row = 'even';
} else {
row = 'odd';
}
i++;
pub += '<tr class="row ' + row + '">';
pub += '<td valign="top" class="col1">' + title + '</td>';
pub += '<td valign="top" class="col2">' + desc + '</td>';
pub += '<td valign="top" class="col3">' + start + '</td>';
pub += '</tr>' + 'n';
}
});
if (i == 0) {
pub += '<div class="error">';
pub += 'No Result was Found';
pub += '</div>' + 'n';
//Populate the result
$('#result').html(pub);
} else {
//Pass the result set
showResult(pub);
}
}
function showResult(resultSet) {
//Show the result
pub = '<div class="message">There are ' + i + ' results!</div>';
pub += '<table id="grid" class="table-bordered">';
pub += '<thead><tr>' + 'n';
pub += '<th class="col1"> </th>';
pub += '<th class="col2">Title</th>';
pub += '<th class="col3">Desc</th>';
pub += '<th class="col4">Start</th>';
pub += '</tr></thead>';
pub += '<tbody>';
pub += resultSet;
pub += '<hr class="horule" />';
pub += '</tbody>';
pub += '</table>';
//Populate
$('#result').html(pub)
}
});
And the html is as follows:
<input type="text" id="term" placeholder="Search by program title..."></div>
</div>
<input type="button" id="searchButton" value="Search" class="btn btn-primary" />
<div id="result"> </div>
I had an the idea of using the xml files as variables then using .when and .then to utilize the xml files, although I am not quite sure how to implement these, something like:
// Open the xml file
var sky1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml',
bbc1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/bbc1.xml',
skyn = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_news.xml';
$.when(
$.ajax( sky1 ),
$.ajax( bbc1 ),
$.ajax( skyn )
).then(function( skyone, bbcone, skynews ) {
var sky1p = $(skyone).find('programme'),
bbc1p = $(bbcone).find('programme'),
skynp = $(skynews).find('programme');
//sky one
sky1p.each(function() {
//DO Search
//sky one
skynp.each(function() {
//DO Search
//sky one
bbcp.each(function() {
//DO Search
The intended output is a html table with the title, description and program time. If anyone could help that would be great!
I want to print the data of an object in the form of a table using javascript. The code I have written does not display anything. Please tell me what am I doing wrong here.
Here is the code i wrote-
function Movie(id,movieName)
{
this.id = id;
this.movieName = movieName;
}
function MoviesWatched()
{
this.movies = new Array();
}
MoviesWatched.prototype.addMovie = function(id,name)
{
this.movies[id]=new Movie(id,name);
}
MoviesWatched.prototype.getTable = function()
{
var movie;
var table="<table border=1>";
for(movie in this.movies)
{
table += "<tr><td>";
table += movies[movie].id;
table += "</td><td>";
table += movies[movie].name;
table += "</td></tr>";
}
table += "</table>";
return table;
}
var myList=new MoviesWatched();
myList.addMovie(1,"Inception");
myList.addMovie(2,"Red");
document.write(myList.getTable());
In your getTable function, you need to change movies to this.movies and change name to movieName
var movie;
var table="<table border=1>";
for(movie in this.movies)
{
table += "<tr><td>";
table += this.movies[movie].id;
table += "</td><td>";
table += this.movies[movie].movieName;
table += "</td></tr>";
}
http://jsfiddle.net/fenderistic/9Gzdv/1/