Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic image table creation 1

Status
Not open for further replies.
alehambre

alehambre

Programmer
May 7, 2006
15
US
[highlight #FF99FF]I am creating a table dynamically from an XML file in the DOM. The intent is to create a new <img src= attribute from the hrefs in the XML file 2006_Print_List.xml(See bottom of thread for XML).[/highlight]

[highlight]-I am able to get the filenames from the DOM(See Test Button), but I can't get the [!]imageFilename1by1[/!] variable to load when creating the HTML table. What am I missing?[/highlight]

Any help you can provide would be great!

<html>
<head>
<title>Sample Product Gallery</title>
<script language="JavaScript" type="text/JavaScript">
<!--
//Load the XML to buffer
{ var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
xmldoc.async=false;
xmldoc.load("2006_Print_List.xml");
xmldoc.setProperty("SelectionLanguage", "XPath");}

//Creates Parent Nodes as a Variable
PrintNode = xmldoc.childNodes[2].selectNodes('./Print');

//Creates All image filenames as Variable
allImgFilenames = xmldoc.childNodes[2].selectNodes('./Print/file/@href');

//-->
</script>
<script>
[!]function srcLoop(){
for (var currentNodeNum = 0; currentNodeNum <= 10; currentNodeNum++){
var imageFilename1by1 = ("images/" + PrintNode[currentNodeNum].childNodes[4].getAttribute("href"))
alert("imageFilename1by1 is " + imageFilename1by1)
}
}[/!]
function start() {
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");

// creating all cells
for(var j = 0; j < 2; j++) {
// creates a <tr> element
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 3; i++) {
// creates a <td> element
mycurrent_cell = document.createElement("td");
//creates img tag
imgTag = document.createElement("img");
//appends img tag to table data node
mycurrent_cell.appendChild(imgTag)
//Sets src attribute to filename variable
imgTag.src = imageFilename1by1;
// creates a text node
currenttext = document.createTextNode("cell is row "+j+", column "+i);
// appends the text node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "0");
}
</script>
</head>
<body onload="start();srcLoop()">
<input type="button" value="Test imageFilename1by1 Variable" onclick="srcLoop()"></input>
</body>
</html>


--------------------
XML

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="Printlist.xsl"?>
<PrintList>

<Print>
<ID>001000</ID>
<PrintName>Farmhouse in Spring</PrintName>
<Season>spring</Season>
<PrintSize>8x10</PrintSize>
<file href="spring_234farm.jpg"></file>
<Desc></Desc>
</Print>

<Print>
<ID>001000</ID>
<PrintName>Mr. Bunny</PrintName>
<Season>spring</Season>
<PrintSize>4x6</PrintSize>
<file href="spring_easter_bunny_small.jpg"></file>
<Desc></Desc>
</Print>
</PrintList>
 
Sort by date Sort by votes
I can't get the imageFilename1by1 variable to load when creating the HTML table.
Click to expand...

Surely that's because you're not actually setting it anywhere before trying to use it?

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
There are so many fundmental flaws, so I would practically rewrite it, clearing up scope of variables, variable types, xpath,... all try most to keep the skeleton as you see fit.
[tt]
<html>
<head>
<title>Sample Product Gallery</title>
<script language="JavaScript" type="text/JavaScript">
<!--
//Load the XML to buffer
var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
xmldoc.async=false;
xmldoc.load("2006_Print_List.xml");
xmldoc.setProperty("SelectionLanguage", "XPath");

var PrintNode = xmldoc.documentElement.selectNodes("./Print");
var allImgFilenames=new Array();
for (var i=0;i<PrintNode.length;i++) {
allImgFilenames.push (PrintNode.getElementsByTagName("file")[0].getAttribute("href"));
}

//note: srcLoop() is beyond repair---abandone it.

function start() {
var mybody = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var mytable = document.createElement("table");
var mytablebody = document.createElement("tbody");

// creating all cells
for(var j = 0; j < allImgFilenames.length; j++) {
// creates a <tr> element
var mycurrent_row = document.createElement("tr");
for(var i = 0; i < 3; i++) {
// creates a <td> element
var mycurrent_cell = document.createElement("td");
//creates img tag
var imgTag = document.createElement("img");
//appends img tag to table data node
mycurrent_cell.appendChild(imgTag)
//Sets src attribute to filename variable
imgTag.src = allImgFilenames;
// creates a text node
currenttext = document.createTextNode("cell is row "+j+", column "+i);
// appends the text node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "0");
}
//-->
</script>
</head>
<body>
<button onclick="start()">Test imageFilename</button>
</body>
</html>
[/tt]
Discover by yourself the difference.
 
Upvote 0 Downvote
The only thing I am not that certain is the j and i limit. i<3 seems artificial. But whether i or j should take on the limit allImgFilenames.length? I cannot be sure. Just don't want to scrutinize further without substantial matter raised very more clarity. I guess the op should do their job to ascertain this part of i and j limits---that's all what I have to say.
 
Upvote 0 Downvote
Thanks for helping me clean this up, I certainly appreciate your time. The result I am getting from your version is 100 rows of the same three images.

What I would like though, is to generate 1 cell for each unique filename, so that all table rows and cells are unique representations of separate images.

I'm not sure what to modify to achieve this.


I have changed this part to make the images pull in:

//Sets src attribute to filename variable
imgTag.src = ("images/" + allImgFilenames);

Any suggestions would be great. Thanks!
 
Upvote 0 Downvote
Perhaps I should also mention that the XML I am using contains 100 print nodes. This is the reason I am getting 100 as the value of Printnode.length . I shortened the XML for the example I posted previously.
 
Upvote 0 Downvote
Change the corresponding part. It will make thing more concise besides getting the unique images.
[tt]
var PrintNode = xmldoc.documentElement.selectNodes("./Print/file/@href[not(. = preceding-sibling::*)]");
var allImgFilenames=new Array();
for (var i=0;i<PrintNode.length;i++) {
allImgFilenames.push (PrintNode);
}
[/tt]
The i,j upper limit inside the function start() as I was worried in the previous postng should be set according your intention and that you know how.
 
Upvote 0 Downvote
In the new version, PrintNode is in all aspects the same as allImgFilenames, you can simply replace them with one line and get rid of PrintNode variable altogether. (I kept PrintNode and allImgFilenames above to keep the continuity.)
[tt]
var allImgFilenames=xmldoc.documentElement.selectNodes("./Print/file/@href[not(. = preceding-sibling::*)]");
[/tt]
 
Upvote 0 Downvote
Correction

After looking at your source file again, there should be a mistake in the node location path. The correct xpath should be this.
[tt]
//version 1
var PrintNode = xmldoc.documentElement.selectNodes("./Print/file/@href[not(. = [red]../../[/red]preceding-sibling::*[red]/file/@href[/red])]");
var allImgFilenames=new Array();
for (var i=0;i<PrintNode.length;i++) {
allImgFilenames.push (PrintNode);
}
[/tt]
[tt]
//version 2
var allImgFilenames=xmldoc.documentElement.selectNodes("./Print/file/@href[not(. = [red]../../[/red]preceding-sibling::*[red]/file/@href[/red])]");
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
356
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
320
coldbohemia
coldbohemia
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
243
waubain
waubain
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
94
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top