XML based list w/ pictures client editable! [Archive]

Matrix015

04-07-2010, 03:26 PM

Hi all,

I am having trouble getting an XML based list to display pictures.
I am new to XML and I have tried to research this for the last couple of days, but there does not seem to be a resource out there that describes this process.

Example XML file. I would like to insert a picture with each Motor.:

<?xml version="1.0" encoding="utf-8"?>
<Motors>
<Motor>
<Manufacturer>Mercury</Manufacturer>
<Model>Unknown</Model>
<Horsepower>8 hp</Horsepower>
<Year>2005</Year>
<Price>300.00</Price>
</Motor>
<Motor>
<Manufacturer>Mercury</Manufacturer>
<Model>Unknown</Model>
<Horsepower>80 hp</Horsepower>
<Year>2005</Year>
<Price>300.00</Price>
</Motor>
</Motors>

Example HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
var xmlDoc;
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","/XML/Text/Motors.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("Motor");

function show(i)
{
Manufacturer=(x[i].getElementsByTagName("Manufacturer")[0].childNodes[0].nodeValue);
Model=(x[i].getElementsByTagName("Model")[0].childNodes[0].nodeValue);
Horsepower=(x[i].getElementsByTagName("Horsepower")[0].childNodes[0].nodeValue);
Year=(x[i].getElementsByTagName("Year")[0].childNodes[0].nodeValue);
Price=(x[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue);
txt="Manufacturer: "+Manufacturer+"<br />Model: "+Model+"<br />Horsepower: "+Horsepower+"<br/>Year: "+Year+"<br />Price: "+Price ;
document.getElementById("show").innerHTML=txt;
}
</script>
</head>

<body>
<div id="show"><h2>Click on a motor to see all the details.</h2></div>
<div id="list">
<script type="text/javascript">
document.write("<table align='center' border='1' padding='5'>");
for (var i=0;i<x.length;i++)
{
document.write("<tr onclick='show(" + i + ")'>");
document.write("<td>");
document.write(x[i].getElementsByTagName("Manufacturer")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("Model")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("Horsepower")[0].childNodes[0].nodeValue);
document.write("</td><tr>");
}
document.write("</table>");
//document.write("<img src="XML/Images/Motor[i].jpg");
</script>

</div>
</body>
</html>

Any help would be appreciated. Thank you in advance.

Matt

Dormilich

04-08-2010, 01:46 AM

erm, what have the pictures to do with the XML?

Samhain13

04-08-2010, 07:33 PM

Assuming you commented this out because it didn't work:

// document.write("<img src="XML/Images/Motor[i].jpg");

I believe it didn't work because you forgot to close the image tag, like:

document.write('<img src="XML/Images/Motor' +i+ '.jpg" />');

This is all assuming that something like "Motor8.jpg" exists in the "XML/Images" directory. :)