I need to retrieve the attributes from the "trans" elements and print them out into a table from the following XML:
<mydata>
<logon>Trans</logon>
<trans date=\"01-02-2008\" incexp=\"Expense\" item=\"Food\" amount=\"100\">1001</trans>
<trans date=\"01-22-2008\" incexp=\"Expense\" item=\"Shoes\" amount=\"123\">1002</trans>
<trans date=\"01-31-2008\" incexp=\"Expense\" item=\"Rent\" amount=\"1500\">1003</trans>
</mydata>
This is a variation on a previous assignment, so there are portions of code commented out that have nothing to do with this one. My problem is that when I try to assign a variable to the attributes of the trans element I get a value of NULL. If you can get me past this I can get the rest.
When I change the Select Box it's supposed to call the XML. The code can be tested at:
http://ntowl.com/testfiles/Kennedy_John_…
(the username/password combinations are user1/pass1, user2/pass2, user3/pass3 to get to the select box).
I didn't know if there were line numbers on this forum, so I put a large comment near the part I'm having trouble with.
Here is the code:
<html>
<script>
/*****************************************
File: asgn6_kennedy.htm
Author: John Kennedy
Assignment: 6
Create Date:
Last Modified:
****************************************/
</script>
<head>
<title>AJAX Finances Logon</title>
<style>
div.AcctInfo
{
position: absolute;
left: 100px;
top: 300px;
height: 400px;
width: 1024px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script language = "JavaScript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
if(XMLHttpRequestObject.overrideMimeType)
{
XMLHttpRequestObject.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getXML(dataSource, divID, data)
{
if(XMLHttpRequestObject)
{
var obj = document.getElementById(divID);
obj.innerHTML = "Loading...";
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
var myXML = XMLHttpRequestObject.responseXML;
alert(myXML);
obj.innerHTML = "";
displayXML(myXML);
}
}
XMLHttpRequestObject.send("data=" + data);
}
return false;
}
function displayXML(myXML)
{
// alert(myXML);
var XMLLogonElements = myXML.getElementsByTagName("logon");
var myLogon = XMLLogonElements[0].firstChild.data;
var XMLCategoryElements = myXML.getElementsByTagName("category");
// var XMLTransElements = myXML.getElementsByTagName("trans");
var targetDiv = document.getElementById("targetDiv");
if (myLogon == "Success")
{
var logonForm = document.getElementById("logon_form");
logonForm.style.visibilty = "hidden";
var resultString = "<h1>Finances</h1> \
Select Category: \
<select id='myaccts' onchange=getAcctInfo('http://ntowl.com/testfiles/AJAXPHP/displayTrans_detailsXML.php')> \
<option value='-'>-</option>";
for(i = 0; i < XMLCategoryElements.length; i++)
{
resultString += "<option value= " + XMLCategoryElements
.firstChild.data + "> \
" + XMLCategoryElements.firstChild.data + "</option>";
}
resultString += "</select>"
logonForm.innerHTML = resultString;
}
else if(myLogon == "Error")
{
targetDiv.innerHTML = "<font color=red>Error: You have input an incorrect username or password</font>";
}
/***********************************************
************************************************
THE PROBLEM IS WITHIN THIS BELOW CONDITIONAL STATEMENT: ATTRIUBTES IS "NULL"
***********************************************
***********************************************/
else if(myLogon == "Trans")
{
var myDataNode = myXML.documentElement;
var logonNode = myDataNode.firstChild;
var transNode = logonNode.firstChild;
// alert(myDataNode);
// alert(logonNode);
// alert(transNode.attributes);
attributes = transNode.attributes;
// alert(attributes)
myDate = attributes.getNamedItem("date");
getIncExp = attributes.getNamedItem("incexp");
getItem = attributes.getNamedItem("item");
getAmount = attributes.getNamedItem("amount");
var myTable = "\n<hr><table border=1>\n";
myTable += "<tr><th>Item</th> \
<th>Inc/Exp</th> \
<th>Item</th> \
<th>Amount</th></tr>";
/*
for(rows = 0; rows < XMLTransElements.length; rows++)
{
myTable += "<tr>" + XMLTransElements
rows.firstChild.data + "</tr>";
}
myTable += "</table>";
objAcctInfo = document.getElementById("AcctInfo");
objAcctInfo.innerHTML = myTable;
*/
}
}
function validateLogon(dataSource, divID)
{
var userName = document.getElementById("userid").value;
var passWord = document.getElementById("password").value;
var data = userName + "|" + passWord;
getXML(dataSource, divID, data);
return false;
}
function getAcctInfo(dataSource)
{
var data = document.getElementById("myaccts").value;
var divID = "AcctInfo";
getXML(dataSource, divID, data);
}
</script>
<body bgcolor="#c0c0c0">
</body>
</html>
Please let me know if you need clarification on anything.
-John
