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?
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?