Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript & XML Problem

    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:

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

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

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    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
    Code:
    <employees>
      <employee>...</employee>
      <employee>...</employee>
    </employees>
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •