I have a table where I can add images onclick. The table is created dynamically from a form. I have tried to save the table to local storage, but I am getting a circular reference issue. I have read this Example of a circular reference in Javascript? but I am a complete novice and struggling to understand. Can you point it out to me?
function makeChart() {
var table = document.createElement('table'),
taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
var cel = null;
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
my_div.appendChild(newList);
if (taskName == '' || numDays == '') {
alert('Please enter task name and number of days');
}
if (howOften == '') {
howOften = 1;
}
if (taskName != '' && numDays != '') {
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
allImages.onclick = function (e) {
if (sel !== null) {
sel.src = e.target.src;
my_div.style.display = 'none';
sel.onclick = null;
sel = null;
}
};
var li = document.createElement('ul');
li.appendChild(allImages);
newList.appendChild(li);
}
my_div.style.display = 'none';
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
sel = img;
};
}
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
document.getElementById('createChart').onclick = null;
console.log(table);
localStorage.setItem(name, JSON.stringify(table));
console.log( JSON.parse( localStorage.getItem( table ) ) );
}
}
Any DOM element holds a reference to the parentNode and to the document, which you can't stringify. In fact each element holds a link to it parent which holds links to its childs.
You can't apply JSON.stringify to a DOM element.
If you really want to save your table, you could save its HTML using table.innerHTML. We could propose other solutions (there even are specific stringify implementations able to produce JSON from circular elements or DOM nodes). But we'd need to know why you try to save a table in localStorage.
Related
In below code I am trying to create two HTML dynamic tables, but it doesn't work.
One table with ID "Table" and another one with ID "Tabled".
<script type="text/javascript">
function Upload() {
const columns = [0, 3] // represents allowed column 1 and 3 in index form
const dccolumns = [0, 3] // represents allowed column 1 and 3 in index form
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
table.id = 'table'
var tabledc = document.createElement("tabled");
tabled.id = 'tabled'
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) { var cells = rows[i].split(","); if (cells.length > 1) {
var row = table.insertRow(-1);
for (var j = 0; j < cells.length; j++) {
// ignore columns that are not allowed
if (!columns.includes(j)) {
continue
}
var rc = cells[j];
if (rc == "SUMMARY") {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
alert(rc);
}
}
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
var alld = document.getElementById("alld");
alld.innerHTML = "";
alld.appendChild(tabled);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
When I run above code it just updates table in "Table", but not in "Tabled". I am not sure what wrong I am doing here.
Thanks
I have this in Jquery all works:
$(document).ready(function() {
$("#checktable td:nth-child(1)").click(function(event){ // This line I need converted
event.preventDefault();
var $td = $(this).closest('tr').children('td'); //This line I need converted
var tid = $td.eq(0).text();
var tdate = $td.eq(1).text();
var tdescribe = $td.eq(2).text();
var wd = $td.eq(3).text();
var dep = $td.eq(4).text();
// ... more code
I need a similar thing in javascript, above only first td is clicked.
My javascript code so far:
function addRowHandlers() {
var table = document.getElementById("checktable2");
var rows = table.getElementsByTagName('tr');
var tid = '';
var tdate = '';
var tdescribe = '';
var wd = '';
var dep = '';
var tisclr = '';
for (var i = 1; i < rows.length; i++) {
rows[i].i = i;
rows[i].onclick = function() {
tid = table.rows[this.i].cells[0].innerText;
tdate = table.rows[this.i].cells[1].innerHTML;
tdescribe = table.rows[this.i].cells[2].innerHTML;
wd = table.rows[this.i].cells[3].innerHTML;
dep = table.rows[this.i].cells[4].innerHTML;
// ... etc more code
The javascript works but any td can be clicked, I am after only:
The first td clicked
Then get parent row
Then all child td's
I have been over dozens of StackOverflow posts and other sites as well... Thanks
And how do I add the event.preventDefault() to regular JS in such a case.
You'd bind the handler to the first .cell.
rows[i].cells[0].onclick = function () {
And then in the handler, access the .parentNode of this to get the row.
And since you're not closing over any variables except those in the function itself (and outside that function, of course), I'd just use a single handler instead of recreating it in the loop.
function addRowHandlers() {
var table = document.getElementById("checktable2");
var rows = table.getElementsByTagName('tr');
var tid = '';
var tdate = '';
var tdescribe = '';
var wd = '';
var dep = '';
var tisclr = '';
for (var i = 1; i < rows.length; i++) {
rows[i].i = i;
rows[i].cells[0].onclick = handler;
}
function handler() {
var row = this.parentNode;
tid = this.innerText;
tdate = row.cells[1].innerHTML;
tdescribe = row.cells[2].innerHTML;
wd = row.cells[3].innerHTML;
dep = row.cells[4].innerHTML;
// etc more code
}
}
I'd probably use a loop to get the desired content too. Maybe like this:
function handler() {
var row = this.parentNode;
var props = ["tid", "tdate", "tdescribe", "wd", "dep"];
var content = props.reduce(function(obj, key, i) {
obj[key] = row.cells[i][i ? "innerHTML" : "innerText"];
return obj;
}, {});
// etc more code
}
Now instead of variables, you have properties of the content object.
UPDATED WITH FULL CODE
I'm trying to dynamically add a div onto some other DIV's stored in an array
The array which contains DIV's is named categoryData which contains an attribute with its category name
The shop-row div's (categoryData) is empty at the beginning.
I've got another array which contains the product object stored in an array called
storeCategoryData
The product object is in the following format,
{CategoryName:categoryname,StoreObject:store_clearfix} // store_clearfix is another div
I'm trying to add the StoreObject into the DIV categoryData.
Unfortunately some objects get added and not the others. I can figure out what i'm doing wrong here. Any help would be much appreciated.
Thanks!
I tried doing everything possible. Still no luck :(
var store_list = document.getElementsByClassName("shop-list")[0];
if(data['stores']!=null && data['stores'] !== typeof undefined){
var numstores = Object.keys(data["stores"]).length;
var count = 0;
while (count < numstores) {
var categories = data["stores"][count].Categories;
var catcount = categories.length;
var c=0;
while(c<catcount){
var cat = categories[c];
if (!(storeCategories.indexOf(cat) > -1)) {
var category_element = document.createElement("li");
if(count==0 && c==0){
category_element.className="active";
}
var clickable = document.createElement("a");
clickable.href = "#";
clickable.innerText = cat;
clickable.setAttribute("category-data", cat);
storeCategories.push(cat);
category_element.appendChild(clickable);
category_list.appendChild(category_element);
var div = document.createElement("div");
div.className = "shop-row";
div.setAttribute("category-name", cat);
categoryData.push(div);
}
c++;
}
count++;
}
count = 0;
while (count < numstores) {
var StoreId = data["stores"][count].StoreId;
var WebsiteUrl = data["stores"][count].WebsiteUrl;
var LogoUrl = data["stores"][count].LogoUrl;
var categories = data["stores"][count].Categories;
var store_clearfix = document.createElement("div");
store_clearfix.className = "single-products-catagory clearfix";
var store_atag = document.createElement("a");
store_atag.className = "home-shop";
store_atag.href = WebsiteUrl;
var store_img = document.createElement("img");
store_img.className = "shop-icon";
store_img.src = LogoUrl;
store_img.alt = StoreId;
store_atag.appendChild(store_img);
store_clearfix.appendChild(store_atag);
c=0;
catcount = categories.length;
while(c<catcount){
var categoryname = categories[c];
var i = 0;
var datacount = categoryData.length;
while(i<datacount){
var datarow = categoryData[i];
if(categoryname==datarow.getAttribute("category-name")) {
var storeObj = {CategoryName:categoryname,StoreObject:store_clearfix};
storeCategoryData.push(storeObj);
break;
}
i++;
}
c++;
}
count++;
}
categories_tab.appendChild(category_list);
i=0;
for (i = 0; i < categoryData.length; i++) {
var div = categoryData[i];
console.log(div);
var name = div.getAttribute("category-name");
var c;
for (c = 0; c < storeCategoryData.length; c++) {
console.log(storeCategoryData[c].CategoryName);
if(storeCategoryData[c].CategoryName==name){
console.log(storeCategoryData[c].StoreObject);
div.appendChild(storeCategoryData[c].StoreObject);
}
}
console.log("Finished "+name );
console.log(div);
store_list.appendChild(div);
}
}
Example variable data defined as follows
{
"status": "success",
"stores": [
{
"StoreId": "randomStore",
"WebsiteUrl": "https://abcd.com",
"LogoUrl": "https://abcd.come",
"Categories": [
"ALL",
"MENS",
"WOMENS"
]
},
{
"StoreId": "someStoreId",
"WebsiteUrl": "https://someurl.com",
"LogoUrl": "https://someLogo.com",
"Categories": [
"MENS"
]
}
]
}
The problem you are facing here is caused by the following behavior:
The Node.appendChild() method adds a node to the end of the list of
children of a specified parent node. If the given child is a reference
to an existing node in the document, appendChild() moves it from its
current position to the new position (MDN: Node.appendChild())
What this means is that appendChild will remove the node if already present in the DOM, which is what we are seeing here. This can be easily solved by creating a deep clone of the node first using cloneNode, before appending it to the target div, as follows:
var clone = storeCategoryData[c].StoreObject.cloneNode(true);
div.appendChild(clone);
You can also refer to the snippet below for a working example:
var categories_tab = document.getElementById('category-tab');
var store_list = document.getElementById('store-list');
var storeCategories = [];
var storeCategoryData = [];
var data = {
"status": "success",
"stores": [{
"StoreId": "randomStore",
"WebsiteUrl": "https://abcd.com",
"LogoUrl": "https://abcd.come",
"Categories": [
"ALL",
"MENS",
"WOMENS"
]
},
{
"StoreId": "someStoreId",
"WebsiteUrl": "https://someurl.com",
"LogoUrl": "https://someLogo.com",
"Categories": [
"MENS"
]
}
]
};
var categoryData = [];
var category_list = document.createElement("ul");
if (data['stores'] != null && data['stores'] !== typeof undefined) {
var numstores = Object.keys(data["stores"]).length;
var count = 0;
while (count < numstores) {
var categories = data["stores"][count].Categories;
var catcount = categories.length;
var c = 0;
while (c < catcount) {
var cat = categories[c];
if (!(storeCategories.indexOf(cat) > -1)) {
var category_element = document.createElement("li");
if (count == 0 && c == 0) {
category_element.className = "active";
}
var clickable = document.createElement("a");
clickable.href = "#";
clickable.innerText = cat;
clickable.setAttribute("category-data", cat);
storeCategories.push(cat);
category_element.appendChild(clickable);
category_list.appendChild(category_element);
var div = document.createElement("div");
div.className = "shop-row";
div.setAttribute("category-name", cat);
categoryData.push(div);
}
c++;
}
count++;
}
count = 0;
while (count < numstores) {
var StoreId = data["stores"][count].StoreId;
var WebsiteUrl = data["stores"][count].WebsiteUrl;
var LogoUrl = data["stores"][count].LogoUrl;
var categories = data["stores"][count].Categories;
var store_clearfix = document.createElement("div");
store_clearfix.className = "single-products-catagory clearfix";
var store_atag = document.createElement("a");
store_atag.className = "home-shop";
store_atag.href = WebsiteUrl;
var p = document.createElement("p");
p.className = "shop-icon";
var t = document.createTextNode(LogoUrl);
p.appendChild(t)
store_atag.appendChild(p);
store_clearfix.appendChild(store_atag);
c = 0;
catcount = categories.length;
while (c < catcount) {
var categoryname = categories[c];
var i = 0;
var datacount = categoryData.length;
while (i < datacount) {
var datarow = categoryData[i];
if (categoryname == datarow.getAttribute("category-name")) {
var storeObj = {
CategoryName: categoryname,
StoreObject: store_clearfix
};
storeCategoryData.push(storeObj);
break;
}
i++;
}
c++;
}
count++;
}
categories_tab.appendChild(category_list);
i = 0;
for (i = 0; i < categoryData.length; i++) {
var div = categoryData[i];
console.log(div);
var name = div.getAttribute("category-name");
var c;
for (c = 0; c < storeCategoryData.length; c++) {
console.log(storeCategoryData[c].CategoryName);
if (storeCategoryData[c].CategoryName == name) {
console.log(storeCategoryData[c].StoreObject);
var clone = storeCategoryData[c].StoreObject.cloneNode(true);
div.appendChild(clone);
}
}
console.log("Finished " + name);
console.log(div);
store_list.appendChild(div);
}
}
<div id="category-tab" style="min-height: 20px; border: 1px solid; padding: 10px"></div>
<div id="store-list" style="min-height: 20px; border: 1px solid green; padding: 10px; margin-top: 30px"></div>
I can not completely understand what you wrote there but as I can see you want to attach from the JSON string and not Node with appendChild.
var div = categoryData[i];
It should be something like this:
store_list.innerHTML += DIV;
I would not even start a while loop with NULL or empty array categoryData. I would outsource this in a function because if I want to call it dynamically again or first see if it's even available. storeCategoryData is an object and not an array ... etc
I think the reason is that one store element can only be appended to only one category element, even it could belong to multiple categories.
========keep history below:====================
The log looks perfect to me. I can't see the problem.
You wrote the statement:
if(storeCategoryData[c].CategoryName==name)
So, some StoreObject are appended; others are not.
I am new to javascript. I have a table of content which I want to rearrange its row and column based on user's window size using window.onresize.
window.onresize = function () {
var w = window.innerWidth;
var nocolumn = Math.floor(w / 252);
if (nocolumn == 0) {
nocolumn = 1;
}
var table = document.getElementById("MainContent_DataList1");
var tbody = table.getElementsByTagName("tbody")[0];
var link = tbody.getElementsByTagName("a");
var norow = Math.ceil(link.length / nocolumn);
tbody.innerHTML = "";
console.log(norow + " " + link.length + " " + nocolumn);
for (var i = 0; i < norow; i++) {
var row = document.createElement("tr");
tbody.appendChild(row);
for (var j = 0; j < nocolumn; j++) {
var cell = document.createElement("td");
row.appendChild(cell);
if ((i * nocolumn + j) < link.length) {
cell.appendChild(link[i * nocolumn + j]);
}
}
}
};
I dont understand why the variable "link" array becomes empty after I use innerHTML = ""; but I stored it before its cleared. Is it somewhere I did wrongly or there are other ways to do this?
When you delete the innerHTML you delete the DOM objects thus every reference to them will point to null.
A work around it will be to clone these objects:
function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
return copy;
}
window.onresize = function () {
var w = window.innerWidth;
var nocolumn = Math.floor(w / 252);
if (nocolumn == 0) {
nocolumn = 1;
}
var table = document.getElementById("MainContent_DataList1");
var tbody = table.getElementsByTagName("tbody")[0];
var tmp = tbody.getElementsByTagName("a");
var link = clone(tmp);
var norow = Math.ceil(link.length / nocolumn);
tbody.innerHTML = "";
...
}
Credit for the clone() method: https://stackoverflow.com/a/728694/1057429
As other answers have suggested, getElementsByTagName returns a live NodeList. Therefore, when you delete all the elements from the body, the NodeList is updated to contain no nodes.
As an alternative, you can use querySelectorAll, which returns a static NodeList, or use getElementsByTagName and assign references to an array before clearing the nodes from the body, e.g.
function getNodes() {
var tbody = document.body || document.getElementsByTagName('body')[0];
var nodes, link;
if (tbody.querySelectorAll) {
link = tbody.querySelectorAll('*');
} else {
nodes = tbody.getElementsByTagName("*");
link = [];
for (var i=0, iLen=nodes.length; i<iLen; i++) {
link[i] = nodes[i];
}
}
return link;
}
I need to create custom objects based on an XML input, the rule is that for every node if it has a direct child node is named EndNode and the text value of which is 1, then I create a leaf object. So for every node, I need to check the direct child with name EndNode and its value. It's not so easy with the DOM API and DOM selector (in this case I use Ext.DomQuery) doesn't have a way to select direct child of the root node... Below is my attempt for using DOM selector, I need to wrap the node around with another level of the node for the selector to work. But I can't just say new Node(), it silently fails.
I guess I have to walk through n.childNodes, but it is complicated to do it this way to check the rule I described above. Any solution?
Ext.each(node.childNodes, function(n){
if (n.nodeType == this.XML_NODE_ELEMENT) {
var tmp=new Node();
console.log('hi');
tmp.appendChild(n);
console.log(Ext.DomQuery.select(n.tagName+">EndNode", tmp));
}
}
I did an xml parser. It is quite easy with Dojo's library. Here ya are. When you're done with it though I recommend exporting the var to JSON and using it as cache.
dojo.require("dojox.xml.parser");
var parser = dojox.xml.parser;
function crules() {
this.rules = new Array();
this.xml = Object;
}
xml = '';
crules.prototype.load = function(file){
var xmlget = dojo.xhrGet({
url: file,
handleAs: "xml",
load: function(data){
xml = data;
},
error: function (error) {
console.error ('Error: ', error);
},
sync: true
}
);
this.xml = xml;
}
crules.prototype.buildout = function (){
var rules = this.xml.getElementsByTagName('ruleset');
//dojo.byId('jsloading').innerHTML = 'Loading Javascript';
for(var i=0; i<rules.length; i++){
//dojo.byId('jsloading').innerHTML += ' .';
r = new cruleset();
r.name = xtagvalue(rules[i],'name');
base = xtag(rules[i],'base');
textcustom = xtag(rules[i],'textcustom');
r.textcustomy = xtagvalue(textcustom[0],'y');
r.textcustomx = xtagvalue(textcustom[0],'x');
for(var j=0; j<base.length; j++){
r.bases[j] = new cbase();
r.bases[j].imgsrc = xtagvalue(base[j],'imgsrc');
r.bases[j].color = xtagvalue(base[j],'color');
r.bases[j].coloropts = new Array();
var copts = xtag(rules[i],'option');
for(var k=0; k<copts.length;k++){
var cc = new Object();
cc.color = xtagvalue(copts[k],'color');
cc.imgsrc = xtagvalue(copts[k],'imgsrc');
r.bases[j].coloropts.push(cc);
}
}
zones = xtag(rules[i],'zone');
for(var j=0; j<zones.length; j++){
z = new czone();
z.name =xtagvalue(zones[j],'name');
zoneconfigs = xtag(zones[j],'zoneconfig');
for(var n=0; n<zoneconfigs.length; n++){
zc = new czoneconfig();
zc.name = z.name;
zc.x1 =xtagvalue(zones[j],'x1');
zc.y1 =xtagvalue(zones[j],'y1');
zc.w =xtagvalue(zones[j],'w');
zc.h =xtagvalue(zones[j],'h');
hotspots = xtag(zoneconfigs[n],'hotspot');
for(var k=0; k<hotspots.length; k++){
h = new chotspot();
h.name = xtagvalue(hotspots[k],'name');
h.x =xtagvalue(hotspots[k],'x');
h.y =xtagvalue(hotspots[k],'y');
h.nameyoffset = xtagvalue(hotspots[k],'nameyoffset');
h.accessoryonly = xtagvalue(hotspots[k],'accessoryonly');
if(h.accessoryonly == null){
h.accessoryonly = 0;
}
var showname = xtag(hotspots[k],'showname');
if(!isEmpty(showname)){
h.showname = xtagvalue(hotspots[k],'showname');
}
/*h.itemset =xtagvalue(hotspots[k],'itemset');*/
items = xtag(hotspots[k],'item');
if(items){
for(var l=0;l<items.length;l++){
t = new citem();
t.id = xtagvalue(items[l],'id');
h.items[h.items.length] = t;
}
}
zc.hotspots[zc.hotspots.length] = h;
}
z.zoneconfigs[z.zoneconfigs.length] = zc;
}
r.zones[r.zones.length] = z;
}
this.rules[this.rules.length] = r;
}
/*xmltext = parser.innerXML(xml);
dojo.byId('cwindow').innerHTML = xmltext;*/
}
function xtag(e,tag){
var n=null;
n = e.getElementsByTagName(tag);
if(n.length>=1){
return e.getElementsByTagName(tag);
}
else return null;
}
function xtagvalue(e,tag){
var n=null;
n = e.getElementsByTagName(tag);
if(n.length>=1){
//console.log(tag,'here',n[0],parser.textContent(n[0]));
return parser.textContent(n[0]);
}
else return null;
}