Retrieve XML element attributes with AJAX?

J

John

New member
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_311_AJAX/john.htm?package=xxx
(the username/password combinations are user1/pass1, user2/pass2, user3/pass3 to get to the select box)

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 += "<
 
Back
Top