I am trying to create a web page that takes data from a CVS file and creates a custom for each row of content in the CSV file. I used jQuery to import CSV file and split the data it into an array:
promise = $.ajax({
type:"GET",
dataType:"text",
url:"data.csv",
cache:false
});
promise.done(function(data){
//Parse CSV File
//split on new line
var dataArr = data.split("\n");
console.log(dataArr);
Then I am using $.each to split each line into an array.
//for each line in array
$.each(dataArr,function(){
var valArr = this.split(",");
screenshot of arrays
After that, I would like to take each created array and use it for creating my custom element. However, I can't figure out how to access each created array individually. If I access first item in the array by using valArr[0], I get results for the entire column A (instead of row 1, column A) in my CSV file. I'm new to Javascript, so I'm completely stuck here. Please point me in the right direction.
Thank you!
Update: added the HTML code I am using to insert the data from each row into.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<!--Content start -->
<div class="container-fluid">
<div class="row">
<!--Catalog content start -->
<div class="col">
<div class="row allMyContent">
<!-- Card start -->
<div class='card mb-4 box-shadow col-5 ml-4'>
<div class="card-header" style="background-color: #fff;">
<!-- Link 1, 2, 3 etc go here (id #contentLink) -->
Link 1
<!-- Course 1, 2, 3 etc go here (id #contentTitle) -->
<h5 class="my-0 font-weight-normal mr-5" id="contentTitle">Course 1</h5>
</div>
<div class="card-body">
<div>
<!-- Time and type go here (id #contentLength and #contentType) -->
<p><span class="mr-2" id='contentType'>Type 1</span> | <span class="ml-2"><span id='contentLength'></span> 20 min</span>
</p>
</div>
<div>
<!-- Description goes here (id #contentDescription) -->
<p id='contentDescription'>Description 1</p>
</div>
</div>
<div class="card-footer row" style="font-size: 0.85em;">
<!-- Audience, dates goe here (id #contentAudience #date1 #date2) -->
<small class="col" id='contentAudience'>Audience: HR</small>
<small class="col" id='date1'>Created: Jul-17</small>
<small class="col" id='date2'>Updated: Dec-17</small>
</div>
</div>
<!-- Card end -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Seems you got the .split() done right. To recap:
.split("\n") will get you CSV lines Array (your dataArr)
for looping dataArr you have access to each individual line (I'll use JS's .map())
splitting each line using .split(",") will give you an array of cells
for looping your cells will give you access to each individual cell (let's use .map() again)
// I'll hardcode this CSV data; you, use AJAX as you do already...
const data = `Course A,Link 1,Type1,20,Description 1,HR,Jul-17,Dec-17
Course B,Link 2,Type1,30,Description 2,HR,Oct-17,Dec-18
Course C,Link 3,Type2,60,Description 3,HR,Nov-17,Dec-19`;
const dataArr = data.split("\n");
// let's create rows and cells
document.getElementById("courses").innerHTML = dataArr.map( row =>
// row is still a comma concatenated string.
// Let's split by comma to get cells
`<tr>
${ row.split(",").map( cell => `<td>${cell}</td>`).join("") }
</tr>`
).join(""); // join rows Array into String;
table{
border-collapse: collapse;
width: 100%;
}
th, td{
padding: 5px 10px;
border: 1px solid #eee;
}
<table>
<thead>
<tr>
<th>Course</th>
<th>Link</th>
<th>Type</th>
<th>Duration</th>
<th>Description</th>
<th>CC</th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody id="courses"></tbody>
</table>
If the above seems a bit cryptic here's an example with Array.prototype.forEach()
// I'll hardcode this CSV data; you, use AJAX as you do already...
const data = `Course A,Link 1,Type1,20,Description 1,HR,Jul-17,Dec-17
Course B,Link 2,Type1,30,Description 2,HR,Oct-17,Dec-18
Course C,Link 3,Type2,60,Description 3,HR,Nov-17,Dec-19`;
const lines = data.split("\n");
let HTML = ""; // We'll concatenate HTML string along the way
// let's create rows and cells
lines.forEach(function(line, i) { // Concatenate rows
const items = line.split(","); // (our Array of cells)
HTML += "<tr>"; // open row
HTML += "<td>"+ (i+1) +"</td>" // Insert a hardcoded TD with index
items.forEach(function(item, j) { // than concatenate our remaining cells
HTML += "<td>"+ item +"</td>";
});
HTML += "</tr>"; // Close row
});
document.getElementById("courses").innerHTML = HTML; // Finally, append our HTML string
table{
border-collapse: collapse;
width: 100%;
}
th, td{
padding: 5px 10px;
border: 1px solid #eee;
}
<table>
<thead>
<tr>
<th>#</th>
<th>Course</th>
<th>Link</th>
<th>Type</th>
<th>Duration</th>
<th>Description</th>
<th>CC</th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody id="courses"></tbody>
</table>
if valArr[0] contains whole A column why not iterate over it like this:
for(var column = 0; column < valArr.length; column++){
var currentColumn = valArr[column];
for(var item = 0; item < currentColumn.length; item++){
console.log(currentColumn[item]);
}
}
code above will iterate every column and over every item in every column, if you want to save whole row in variable you can do it like this:
function getRow(varArr, id){
var retval = [];
for(var column = 0; column < valArr.length; column++){
var currentColumn = valArr[column];
retval.push(currentColumn[id]); //add some checking if id is really present in this array
}
return retval;
}
code above will return something like this:
[column_A_item_with_id, column_B_item_with_id, column_C_item_with_id, ...]
After modifying the code suggested by Roko and spending a bunch of time trying to figure out why it's not working, I realized I wasn't building the HTMl correctly. Here is the final result.
const data = `Course A,Link 1,Type1,20,Description 1,HR,Jul-17,Dec-17
Course B,Link 2,Type1,30,Description 2,HR,Oct-17,Dec-18
Course C,Link 3,Type2,60,Description 3,HR,Nov-17,Dec-19`;
const dataArr = data.split("\n");
//Parse CSV File
//split on new line
const lines = data.split("\n");
let HTML = '';
//for each line in array
lines.forEach(function(line, i) {
var contentCards = line.split(",");
HTML += '<div class="card mb-4 box-shadow col-5 ml-4">';
HTML += '<div class="card-header">'
HTML += '<h5 class="my-0 font-weight-normal mr-5" style="color: #ff8f00;">'
HTML += '<a href="'
HTML += contentCards[1];
HTML += '" class="float-right ml-3" id="copyLink" style="color: #00a4b4; font-size: 1.2rem;"><i class="fas fa-external-link-square-alt"></i></a>'
HTML += '<a href="'
HTML += contentCards[1];
HTML += '"class="float-right" style="color: #00a4b4; font-size: 1.2rem;"><i class="fas fa-link"></i></a>'
HTML += contentCards[0];
HTML += '</h5>'
HTML += '</div>'
HTML += '<div class="card-body">'
HTML += '<div>'
HTML += '<div class="card-body">'
HTML += '<p><span class="mr-2">'
HTML += ' <p><span class="mr-2 contentType">'
HTML += contentCards[2];
HTML += '</span>|<span class="ml-2"><i class="far fa-clock"></i ><span>'
HTML += contentCards[3];
HTML += ' min</span >'
HTML += '</p>'
HTML += '</div>'
HTML += '<p>'
HTML += contentCards[4];
HTML += '</p>'
HTML += '</div>'
HTML += '<div class = "card-footer row" style = "font-size: 0.85em;" >'
HTML += '</div>'
HTML += '</p>'
HTML += '</div>'
HTML += '</div>'
document.getElementById("courses").innerHTML = HTML;
});
console.log(HTML);
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<div id="courses">
</div>
Related
I am having difficulty implementing flex-wrap:wrap on tables constructed from javascript objects. I can do it easily without javascript but that is anything but efficient. Can you helpme?
Below is the code sample of the desired output.
.table{
/*max-width: 350px;*/
display: flex;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox template for tables</title>
</head>
<body>
<div class="table">
<table class="#">
<thead><tr class="#"><th>emotion</th><th>description</th><th>description</th></tr></thead>
<tbody>
<tr><td>happy</td><td>happy is a postive feeling</td><td>2</td></tr>
<tr><td>sad</td><td>sad is a negative feeling</td><td>-3</td></tr>
<tr><td>sleepy</td><td>sleepy is when one lacks sleep</td><td>-0.5</td></tr>
<tr><td>eager</td><td>eager is where one can not wait to do or experience something.</td><td>3</td></tr>
</tbody>
</table>
<table class="#">
<thead><tr class="#"><th>emotion</th><th>description</th><th>description</th></tr></thead>
<tbody>
<tr><td>happier</td><td>a stronger feeling than happy</td><td>2</td></tr>
<tr><td>very sad</td><td>a stronger feeling than sad</td><td>-3</td></tr>
<tr><td>knackered</td><td>a stronger feeling than sleepy</td><td>-0.5</td></tr>
<tr><td>excited</td><td>a stronger feeling than eager</td><td>3</td></tr>
</tbody>
<table class="#">
<thead><tr class="#"><th>emotion</th><th>description</th><th>description</th></tr></thead>
<tbody>
<tr><td>extatic</td><td>The strongest version of happy</td><td>2</td></tr>
<tr><td>distraught</td><td>The strongest version of sad</td><td>-3</td></tr>
<tr><td>fatigued</td><td>The strongest version of sleepy</td><td>-0.5</td></tr>
<tr><td>very excited</td><td>The strongest version of excited</td><td>3</td></tr>
</tbody>
<table>
</div>
</body>
</html>
The issue is that I lose the flex-wrap:wrap style on these tables when I try to build these tables using javascript. Can anyone help me fix this?
let tbody = '<tbody>';
// const objectTitles = { menuItem, description, value } of Object.values(feelings);
for (const { menuItem, description, value } of Object.values(feelings)) {
tbody += '<tr>';
tbody += `<td class="menuItem">${menuItem}</td>`;
tbody += `<div class="hide description">${description}</div>`;
tbody += `<td>${value}</td>`;
tbody += '</tr>';
}
for (const { menuItem, description, value } of Object.values(feelings2)) {
tbody += '<tr>';
tbody += `<td class="menuItem">${menuItem}</td>`;
tbody += `<div class="hide description">${description}</div>`;
tbody += `<td>${value}</td>`;
tbody += '</tr>';
}
tbody += '</tbody>';
So i am here wrote this simple function for searching movies and manipulating them in the dom.and the problem here is when a movie name is typed the api response back with at least 20/30 recommendations.And i want the fetched data to be distributed in 8 columns per row.So i wrote this function :
Javascript part :
db.multisearch()
.then(data=>{
var div=document.getElementById('call');
var output='';
for(let i=0;i<data.length;i++){
var poster=data[i].poster_path;
var title=data[i].title;
for(let j=0;j<=8;j++){
output +=`<div class="col-sm">
<div class="card mb-3">
<img class="card-img-top" src='https://image.tmdb.org/t/p/w342//${poster}' alt="Card image cap">
<div class="text-block"><p>${title}</p></div>
</div>
</div>`;
}
}
div.innerHTML=output;
});
HTML part that im manipulating :
<section class="movie-page">
<div class="container">
<div class="row" id="call"></div>
</div>
But Instead of the desired outcome ,it just repeats one movie 8 times.
And I am trying to get the model to be somewhat like this each row without repeating any movie:
I am a newbie so i might have missed something. Please do help .
Your loop should be like the following; you need to close the current row after every 8th item and then open a new row.
var output = '<div class="row">';
for(let j=1; j<=data.lenght; j++){
output +=`<div class="col-xs-1">
content into column
</div> \n`;
if(j !== 0 && j%8 === 0) {
output += '</div><div class="row">';
}
}
output += '</div>';
See the working example below:
var output = '<div class="row">';
for(let j = 1; j<= 50; j++){
output +=`<div class="col-xs-1">
${j}
</div> \n`;
if(j !== 0 && j%8 === 0) {
output += '</div><div class="row">';
}
}
output += '</div>';
document.getElementById('container').innerHTML = output;
.row {
margin-bottom: 10px;
overflow: hidden;
display: block;
}
.row .col-xs-1 {
float: left;
box-sizing: border-box;
color: red;
text-align: center;
display: block;
margin-bottom: 10px;
width: 8.33%;
padding: 10px;
}
<div class="container" id="container"></div>
I am making an Electron app that has tables, the user can add a table and change the content of the fields, but I want the input to be saved, and only if the user entered anything into them.
How would I do this? Do I need a database? Can it be done with cookies? I have tried to learn how to use cookies but have not found how to save an added element as well as the content.
function appendRow(id) {
var table = document.getElementById(id); // table reference
length = table.length,
row = table.insertRow(table.rows.length); // append table row
var i;
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode('_'); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('id', style); // set DIV class attribute
div.setAttribute('idName', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
table {
text-align: center;
width: 400px;
}
tr:nth-child(even) {
background-color: #ccc;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
<table id="custListTop" contenteditable="false" style="background-color: #ccc;">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>Someone</td>
<td>something</td>
</tr>
</table>
<script src="test.js"></script>
</body>
</html>
Well how you are going to save it depends on what you want to do. If you want it to persist after your program was exited, you will need to save it on the disk or on a server somehow. You probably just want to save it into a file, though. (JSON is the most obvious choice). Otherwise, just save it into a js variable.
To get the data, I would either use a save button that reads the text of your cells, or use databinding. Later is very useful for Electron apps. You can either use a framework (like vue.js, react.js or many more) or DIY.
Former is probably easier and you will want a button to save it to the disk anyways. On the click of the button you can just go through all <tr>-elements and get their values and save them.
function save(id) {
var table = document.getElementById(id);
var trs = table.getElementsByTagName('tr'); // list of all rows
var values = []; // will be a (potentially jagged) 2D array of all values
for (var i = 0; i < trs.length; i++) {
// loop through all rows, each will be one entrie in values
var trValues = [];
var tds = trs[i].getElementsByTagName('td'); // list of all cells in this row
for (var j = 0; j < tds.length; j++) {
trValues[j] = tds[j].innerText;
// get the value of the cell (preserve newlines, if you don't want that use .textContent)
}
values[i] = trValues;
}
// save values
console.log(values);
}
function appendRow(id) {
var table = document.getElementById(id); // table reference
length = table.length,
row = table.insertRow(table.rows.length); // append table row
var i;
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode('_'); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('id', style); // set DIV class attribute
div.setAttribute('idName', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
table {
text-align: center;
width: 400px;
}
tr:nth-child(even) {
background-color: #ccc;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
<button id="save" class="save" onclick="save('custList')">save</button>
<table id="custListTop" contenteditable="false" style="background-color: #ccc;">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>Someone</td>
<td>something</td>
</tr>
</table>
<script src="test.js"></script>
</body>
</html>
I created a table using JavaScript, but it doesn't render using my css. so how can I make it work? actually i need more help, my idea is to create a screen that has one button and once you click on it a menu which is a table of one column starting at the top of the screen and end at the end of the screen should be showing. the table would be scrollable and each row has text (url text) with no url line under the text, so when you click on it the page open in all of the screen behind the table and the button. the button should be always showing (but it disappears when i click on it).
the main.js file is
function makeTableHTML() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
var myArray = [ [ "Name, http://www.google.com" ],
[ "Name, http://www.google.com" ] ];
var result = '<table width = "300">';
for (var i = 0; i < myArray.length; i++) {
result += "<tr><td>";
if (i < 10) {
result += "0" + i + " ";
} else {
result += i + " ";
}
result += '<a href="' + myArray[i][0] + '">';
result += myArray[i][1] + "</a>";
result += "<td></tr>";
}
result += "</table>";
document.write(result);
document.getElementById("channelsmenu").classList.toggle(result);
}
function hideTableHTML() {
var x = document.getElementById('channelsmenu');
x.style.display = 'none';
}
and my html is
<!DOCTYPE html>
<html>
<head>
<title>5Star-IPTV</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>
<div id="channelsmenu" class="dropdown-content"></div>
</td>
<td class="buttons-col"><input type="image"
src="channels-menu.png" class="buttons" alt="channels menue"
onMouseOver="this.src='channels-menu-1.png'"
onMouseOut="this.src='channels-menu.png'" onclick="makeTableHTML()" /></td>
<td class="buttons-col"><input type="image"
src="return-button.png" alt="return button" class="buttons"
onMouseOver="this.src='return-button-1.png'"
onMouseOut="this.src='return-button.png'" onclick="hideTableHTML()" /></td>
</tr>
</table>
</div>
</body>
</html>
and this is the css
table {
width: 100%;
border: 1px solid black;
background-color: #808080;
}
tr {
width: 100%;
align: right;
}
th, td {
text-align: right;
} background-color: #808080;
}
.buttons-col {
text-align: center;
width: 90px;
padding-top: 5px;
}
in HTML you open "th" and close it as "tr". Secondly, please learn to write/format your code properly - it'll be easier to read your code and to help you.
Besides, use the < script > tag at the end of the HTML or run your JS in the function on event DOMContentLoaded
BACKGROUND:
I have a small jquery app that contains widgets. There are 2 types of widgets in this app and they are counter widgets and grid widgets. For grid widgets i am utilizing dataTables.
My app basically connects to a server and recieves various information such as widget names etc. So based on the information received i dynamically create pages for each widget. Things are working fine at the moment but i am facing a little problem.
Problem
The issue i have right now is to do with my grid widgets which utilize dataTables api.From my server I receive the grid information in this format.
//EXAMPLE INPUT
/*
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<column width="55" type="ro" align="left" sort="str">Player</column>
<column width="55" type="ro" align="left" sort="str">State</column>
<column width="55" type="ro" align="left" sort="str">Points</column>
</head>
<row id="1">
<cell>Lebron King James</cell>
<cell>Best Mode</cell>
<cell>45</cell>
</row>
</rows>
*/
Then i parse it to the appropriate table format (function createTableStringFromXML) so it works with the datatables.
My table is reloading every 3 seconds. So this is the problem.
Eventhough i want my table to update i think reloading the entire table is bad because not only does it look weird but i think it is not necessary. I was wondering is there way i can write some function that compares the old table with the new updated table and only updates rows that need update? So this way the entire table it self is not loaded?
MY HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>NBA Fanatico</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/tdMobile.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="cssfinal/style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<!-- MAIN JS SCRIPT CONTANS CODE FOR COUTNER WIDGETS, TABLES , AJAX REQUEST FOR GETTING DATA-->
<script src="dynamic.js"></script>
<!-- SCRIPTS FOR DATA TABLES -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" />
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="page1">
<!-- <div data-role="header" data-position="fixed">
<h1></h1>
</div> -->
<div data-role="content" data-theme="a">
<div class="login-box" id="login">
<div id="loginprompt">
<div id="header">
<h3>Basketball Fanatico</h3>
</div>
</div>
<form method="GET">
<div id="username" data-role="fieldcontain">
<input type="text" name="username" placeholder="Username" />
</div>
<div id="password" data-role="fieldcontain">
<input type="password" name="password" id="txtId" placeholder="Password"/>
</div>
<div id ="loginbtn">
<a data-role="button" id="log" data-theme="a" href="#page2" data-transition="slide">LOGIN</a>
</div>
</form>
<br />
</div>
</div>
</div>
</div>
<!-- PAGE 2 -->
<div data-role="page" id="page2">
<div data-role ="header" data-position="fixed" data-theme="a">
<a data-iconpos="notext" href="#panel" data-role="button" data-icon="bars"></a>
<h1 class="ui-title" role="heading">Basketball Fanatico</h1>
<div class="ui-btn-right" data-type="horizontal">
<a data-iconpos="notext" href="#page2" data-role="button" data-icon="home" ></a>
<a data-iconpos="notext" href="#page1" data-role="button" data-icon="delete" ></a>
</div>
</div>
<div data-role="content" id="page2content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="a">WELCOME!</li>
<li>Use the menu on the left to navigate <br />and configure the various options.</li>
</ul>
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="push">
<!-- <div> -->
<div id="nav"><h3>Navigation</h3>
<hr>
<label>
<input id="chkSort" type="checkbox" checked="true" />Allow sorting</input>
</label>
<hr>
</div>
<div id="items" data-role="button">
<!-- Insert Parsed Widget Names Here -->
LOG OUT
</div>
<!-- </div> -->
</div>
</body>
</html>
MY JS
var widgetNames = new Array();
var widgetId = new Array();
var pageId = ''
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel().enhanceWithin();
//Format the grid as required
$('#example2').dataTable( {
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": { "sSearch": "" }
} );
$('.dataTables_filter input').attr("placeholder", "Search");
$('.dataTables_filter').css('float','none');
$('.dataTables_filter').css('padding-right','0px');
$("#example_filter").detach().prependTo('#header1');
});
$(document).on('pagecreate', '#page1', function() {
// $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
// pageId = $('body').pagecontainer('getActivePage').prop("id");
// alert( "The page id of this page is: " + pageId );
// });
$("#log").on('click', function(){
$.ajax({
url: "script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':$("input[name='username']").val(), 'password':$("input[name='password']").val()},
dataType: "text",
success: function (html) {
//console.log(html);
widgetNames = new Array();
widgetId = new Array();
var res = html.match(/insertNewChild(.*);/g);
//Get each widget name and ID and assign to values in an array
for(var i =0;i<res.length;i++){
//alert(res[i]);
var temp = res[i].split(',');
if(temp.length >= 3){
widgetNames[i] = (temp[2].replace('");','')).replace('"','');
widgetId[i] = temp[1].replace("'","").replace("'","").replace(/ /g,'');
}
}
var AllWidgets = ''
var testwidget = new Array();
//Loop through the html returned and get the data relevant to each widget... save in temp array
var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);
for(var i =0;i<tempWidgetContent.length;i++){
var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{')+1);
//alert(widgetContent);
//This alone handles coutners...
testwidget[i] = widgetContent.replace("site +","");
//replace the code for a grids...
if(testwidget[i].indexOf('grid') > 0){
testwidget[i] = CreateGridUpdateFunction(testwidget[i],i);
}
}
var widgetPart = new Array();
//Assume we have widget names, ids, and loading data in 3 arrays
//Loop through and create the necessary page.
for(var i = 0; i<widgetNames.length; i++){
if(testwidget[i].indexOf('hi') > -1){
// alert('WORKING');
var pageHeaderPart = "<div data-role= 'page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header' id='header1' data-position='fixed' data-theme='a'><a href='#panel' data-icon='bars' data-iconpos='notext' class='ui-btn-left'></a><a href='#' data-icon='search' id='search' data-iconpos='notext' class='ui-btn-left' style='margin-left: 35px'></a><h1>BASKETBALL FANATICO</h1><a href='#page1' data-icon='delete' data-iconpos='notext' class='ui-btn-right'></a><a href='#page2' data-icon='home' data-iconpos='notext' class='ui-btn-right' style='margin-right: 35px;'></a></div><div data-role='content'>";
}
else{
var pageHeaderPart = "<div data-role='page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header'data-position='fixed' data-theme='a'><a data-iconpos='notext' href='#panel' data-role='button'data-icon='bars'></a><h1 class='ui-title'role='heading'>BASKETBALL FANATICO</h1><div class='ui-btn-right' data-type='horizontal'><a data-iconpos='notext' href='#page2' data-role='button'data-icon='home'style=\" margin-right:5px; \"></a><a data-iconpos='notext' href='#page1' data-role='button'data-icon='delete'></a></div></div><div data-role='content'>";
}
var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";
if(testwidget[i].indexOf('hi') > -1){
// alert('i am a grid');
var check = "<div data-role='tbcontent'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+widgetNames[i]+"";
}
var check = "<div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+widgetNames[i]+"</div>";
if(testwidget[i].indexOf('counterValue') > 0){
// alert('i am a counter');
widgetPart[i] = '<DIV style=\" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;\" id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' + testwidget[i] + '$(\"#widgetContainer_'+widgetId[i]+'").html(counterValue);' + '}' + '</SCRIPT>';
}
if(testwidget[i].indexOf('hi') > -1){
// alert('i am a grid');
widgetPart[i] = '<DIV id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' + testwidget[i] + '}' + '</SCRIPT>';
}
else {
widgetPart[i] = '<DIV style=\" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;\" id=widgetContainer_'+widgetId[i]+'>I dont know what I am</DIV>';
}
AllWidgets +='<a href="#'+widgetId[i]+'" class="widgetLink" data-theme="b" data-role="button" >'+widgetNames[i]+'</a>';
var makePage = $(pageHeaderPart + check + widgetPart[i] + pageFooterPart);
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllWidgets).trigger('create');
//Widget Update Function
function UpdateActivePage(){
//get active page
pageId = $(":mobile-pagecontainer" ).pagecontainer('getActivePage').prop("id");
//figure out index
var idx;
for (var i=0; i<widgetId.length; i++){
if (widgetId[i] == pageId){
idx = i;
break;
}
}
//alert(pageId);
//run your update
//alert("RUNNING:");
eval(testwidget[idx]);
//alert('Updateing active page');
$("#widgetContainer_" + pageId).html(counterValue);
$('#grid_'+idx).dataTable( {
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": { "sSearch": "" }
} );
$('.dataTables_filter input').attr("placeholder", "Search");
$('.dataTables_filter').css('float','none');
$('.dataTables_filter').css('padding-right','0px');
$("#example_filter").detach().prependTo('#header1');
}
function CreateGridUpdateFunction(oldUpdatefunction,thisWidgetID)
{
var updateLines = oldUpdatefunction.split("\n");
var updateFunctionCode = "";
for (var i=0; i<updateLines.length;i++)
{
if(updateLines[i].indexOf(" var url = ") > 0)
{
var updateURL = updateLines[i];
if(updateURL.indexOf("&windowWidth=") > 0){
updateURL = updateURL.substr(0,updateURL.lastIndexOf("&windowWidth=")) + "';";
}
updateFunctionCode += updateURL;
updateFunctionCode += " var loader = dhtmlxAjax.getSync(url);";
updateFunctionCode += " if(loader.xmlDoc.responseText.length > 0){";
updateFunctionCode += " counterValue = createTableStringFromXML(loader.xmlDoc.responseText,"+thisWidgetID+");";
updateFunctionCode += " } ";
}
}
return "var counterValue = \"hi\"; "+updateFunctionCode ;
}
$(":mobile-pagecontainer" ).on( "pagechange", function() { UpdateActivePage(); } )
setInterval(UpdateActivePage, 3000);
}
});
});
});
//Returns a bool indicated if the (space trimmed) string starts with needle.
function startsWith(searchString,searchVal){
var search = searchString.trim();
return search.indexOf(searchVal) >= 0;
}
function createTableStringFromXML(serverXML,thisWidgetID){
console.log(serverXML);
var xmlLines = serverXML.split("\n");
var returnTable = "";
for (var i=0; i<xmlLines.length;i++)
{
if(startsWith(xmlLines[i],"<rows"))
{
returnTable += "<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" class=\"display\" id=\"grid_"+thisWidgetID+"\" width=\"100%\">";
}
else if(startsWith(xmlLines[i],"</rows>"))
{
returnTable += "</tbody></table>";
}
else if(startsWith(xmlLines[i],"<head>"))
{
returnTable += "<thead><tr>";
}
else if(startsWith(xmlLines[i],"</head>"))
{
returnTable += "</tr></thead><tbody>";
}
else if(startsWith(xmlLines[i],"<column"))
{
returnTable += "<th>"+xmlLines[i].match(/>(.*?)</i)[1]+"</th>";
}
else if(startsWith(xmlLines[i],"<row"))
{
returnTable += "<tr>";
}
else if(startsWith(xmlLines[i],"</row"))
{
returnTable += "</tr>";
}
else if(startsWith(xmlLines[i],"<cell"))
{
returnTable += "<td>"+xmlLines[i].match(/>(.*?)</i)[1]+"</td>";
}
console.log(returnTable);
}
return returnTable ;
}
Please advice on how to achieve this. I am sorry if you have not understood my question so please ask me again. I am only using HTML and JS for couple of months so i am band new to this and that also might be the reason why my question might sound silly to some of you so sorry in advance. I apologize for my poor english please let me know if you dont understand. Thanks.
Updating the table every 3 seconds could cause performance issues, especially if you have lots of rows!
If you want to do it, you can iterate through the rows in the update XML and then write the values to the individual cells in the table.
DEMO
In my example, the table is already there with row ids as data attributes on the row element. I am updating once on a button click instead of every 3 seconds on a timer, but the parsing would be the same.
$("#update").on("click", function(){
var $trows= $('#example tbody tr');
var xmlDoc = $.parseXML( xmlstring );
var $xml = $( xmlDoc );
$xml.find("row").each(function(index){
var id = $(this).prop("id");
var $cells = $(this).find("cell");
var c1 = $cells.eq(0).text();
var c2 = $cells.eq(1).text();
var c3 = $cells.eq(2).text();
//get row in table with this id
var $rowtd = $('#example tbody [data-id=' + id + '] td');
$rowtd.eq(0).text(c1);
$rowtd.eq(1).text(c2);
$rowtd.eq(2).text(c3);
});
});
The code loads the XML string into an XmlDocument and then creates a jQuery object from the document. Next I iterate through all the Xml Nodes called "row" getting the id and the 3 cell texts. Then I find the row in the existing table with the same Id and write the texts into the existind TDs in the row.
You will need to test the performance of this given the normal number of rows you have and the types of devices you plan to support.