...

View Full Version : Javascript & XML Problem



pgarner_ffamktg
11-17-2008, 04:50 PM
Hi everyone, I'm trying to code an xml staff database for our company, but I'm having a problem. It works when I have one employee in the xml, but when I add a second the script breaks.

Here's my xml:


<?xml version="1.0" ?>
<employee id="1" fname="Amy" lname="S" sin="xxx xxx xxx" photo="amysmuck.jpg" email="amys@domain.com" cellphone="" homephone="" workphone="">
<address>
20 Roehampton Ave,
Toronto ON,
M4P 1R9</address>
</employee>

This works, and when I count the children in the xml Javascript collection it lists 2 items (<?xml?> tag, and the <employee> tag).

When I add a second <employee>, the script lists 0 items in the xml collection.

Here's my Javascript thus far:


<html>

<head>

<title>Free For All Marketing Staff Database</title>

<style>
div.staff_line
{
vertical-align: middle;
}

img.staff_line
{
width: 80px;
}
div.staff_details
{
position: absolute;
left: 150px;
top: 50px;
width: 600px;
height: 500px;
border-style: solid;
border-size: 5px;
border-color: #dda000;
background-color: #ffcc00;
visibility: hidden;
}
</style>

<script>
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile)
{
xmlDoc.async = "false";
xmlDoc.onreadystatechange = verify;
xmlDoc.load(xmlFile);
xmlObj = xmlDoc.documentElement;
}

function verify()
{
// 0 - Object is not initialized
// 1 - Object is loading data
// 2 - Loaded object has loaded data
// 3 - Data from object can be worked width
// 4 - Object completely initialized

if (xmlDoc.readystate != 4)
{
return false;
}
}

loadXML("test.xml"); // Load the xml database

function show_details(id)
{
var fname, lname, picture, cellphone, homephone, workphone, email, mailingaddress, sin;


for (var i = 0; i < xmlDoc.childNodes.length; i++)
{

if (xmlDoc.childNodes[i].nodeName == "employee" && xmlDoc.childNodes[i].getAttribute("id") == id)
{
fname = xmlDoc.childNodes[i].getAttribute('fname');
lname = xmlDoc.childNodes[i].getAttribute('lname');
picture = xmlDoc.childNodes[i].getAttribute('photo');
email = xmlDoc.childNodes[i].getAttribute('email');
sin = xmlDoc.childNodes[i].getAttribute('sin');

cellphone = xmlDoc.childNodes[i].getAttribute('cellphone');
workphone = xmlDoc.childNodes[i].getAttribute('workphone');
homephone = xmlDoc.childNodes[i].getAttribute('homephone');

for (var j = 0; j < xmlDoc.childNodes[i].childNodes.length; j++)
{
if (xmlDoc.childNodes[i].childNodes[j].nodeName == "address")
{
mailingaddress = xmlDoc.childNodes[i].childNodes[j].text;
}
}

break;
}
}

document.all.stfName.innerHTML = lname + ", " + fname;

document.all.stfFirstName.value = fname;
document.all.stfLastName.value = lname;
document.all.stfSIN.value = sin;
document.all.stfPhoto.value = picture;

document.all.stfCellPhone.value = cellphone;
document.all.stfWorkPhone.value = workphone;
document.all.stfHomePhone.value = homephone;

document.all.stfAddress.value = mailingaddress;

document.all.stfDetails.style.visibility = "visible";
}
function hide_details()
{
document.all.stfDetails.style.visibility = "hidden";
}

function show_add()
{
document.all.stfAdd.style.visibility = "visible";
}
function hide_add()
{
document.all.stfAdd.style.visibility = "hidden";
}

function update_details(id)
{
alert("dfd");
}

function add_staff()
{
alert(xmlDoc.childNodes.length);

hide_add();
}

</script>

</head>

<body>

<div class="staff_details" id="stfDetails">
<h3 id="stfName">Staff Name</h3>

<input type="hidden" id="stfID" value="65">

<table>
<tr>
<td>First Name:</td>
<td><input type="text" value="" id="stfFirstName"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" value="" id="stfLastName"></td>
</tr>
<tr>
<td>Home Phone:</td>
<td><input type="text" value="" id="stfHomePhone"></td>
</tr>
<tr>
<td>Cell Phone:</td>
<td><input type="text" value="" id="stfCellPhone"></td>
</tr>
<tr>
<td>Work Phone:</td>
<td><input type="text" value="" id="stfWorkPhone"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea id="stfAddress" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td>SIN Number:</td>
<td><input type="text" value="" id="stfSIN"></td>
</tr>
<tr>
<td>Photo:</td>
<td><input type="upload" value="" id="stfPhoto"></td>
</tr>
<tr>
<td></td><td><input type="button" value="Cancel" onclick="hide_details();"> <input type="button" value="Save" id="stfSaveDetails" onclick="update_details(document.all.stfID.value);"></td>
</tr>
</table>

</div>

<div class="staff_details" id="stfAdd">
<h3>Add Staff Member</h3>

<table>
<tr>
<td>First Name:</td>
<td><input type="text" value="" id="stfAddFirstName"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" value="" id="stfAddLastName"></td>
</tr>
<tr>
<td>Home Phone:</td>
<td><input type="text" value="" id="stfAddHomePhone"></td>
</tr>
<tr>
<td>Cell Phone:</td>
<td><input type="text" value="" id="stfAddCellPhone"></td>
</tr>
<tr>
<td>Work Phone:</td>
<td><input type="text" value="" id="stfAddWorkPhone"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea id="stfAddAddress" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td>SIN Number:</td>
<td><input type="text" value="" id="stfAddSIN"></td>
</tr>
<tr>
<td>Photo:</td>
<td><input type="upload" value="" id="stfAddPhoto"></td>
</tr>
<tr>
<td></td><td><input type="button" value="Cancel" onclick="hide_add();"> <input type="button" value="Add" onclick="add_staff();"></td>
</tr>
</table>

</div>

<div>
<h3>Free For All Marketing</h3>
</div>

<div>
<h4>Staff List</h4>

<div class="actions">
<a href="javascript: show_add();">Add Staff Member</a>
</div>

<div><table width='90%'>
<tr><th>Picture</th><th>Name</th><th>Phone Number</th><th>Email Address</th><th>Mailing Address</th><th>SIN Number</th></tr>

<script>

// Loop through the employee list and output the employee's name.

var cellnumber, homenumber, worknumber, mailingaddress;

for (var i = 0; i < xmlDoc.childNodes.length; i++)
{

if (xmlDoc.childNodes[i].nodeName == "employee")
{

for (var j = 0; j < xmlDoc.childNodes[i].childNodes.length; j++)
{
if (xmlDoc.childNodes[i].childNodes[j].nodeName == "address")
{
mailingaddress = xmlDoc.childNodes[i].childNodes[j].text;
}
}

cellnumber = xmlDoc.childNodes[i].getAttribute('cellphone');
homenumber = xmlDoc.childNodes[i].getAttribute('homephone');
worknumber = xmlDoc.childNodes[i].getAttribute('workphone');

document.write("<tr>");

document.write("<td width='75px'>");
document.write("<img src='pictures/" + xmlDoc.childNodes[i].getAttribute('photo') + "' width='70px'>");
document.write("</td>");
document.write("<td valign='middle'>");
document.write("<a href='javascript: show_details(" + xmlDoc.childNodes[i].getAttribute('id') + ");'>" + xmlDoc.childNodes[i].getAttribute('lname') + ", " + xmlDoc.childNodes[i].getAttribute('fname') + "</a>");
document.write("</td>");
document.write("<td valign='middle'>");
document.write("Cell: " + cellnumber + "<br/>");
document.write("Home: " + homenumber + "<br/>");
document.write("Work: " + worknumber + "<br/>");
document.write("</td>");

document.write("<td valign='middle'>");
document.write(xmlDoc.childNodes[i].getAttribute('email'));
document.write("</td>");

document.write("<td valign='middle' width='300px'>");
document.write(mailingaddress);
document.write("</td>");

document.write("<td valign='middle'>");
document.write(xmlDoc.childNodes[i].getAttribute('sin'));
document.write("</td>");

document.write("</tr>");
}

}

</script>


</table>
</div>

</body>

</html>

Any ideas?

shyam
11-21-2008, 03:14 PM
you are breaking the cardinal rule of xml...i.e. the has to be a single root node...in test.xml the root node is employee and you can add more elements only as children of employee what you need to do is have an employees element like this


<employees>
<employee>...</employee>
<employee>...</employee>
</employees>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum