Menu
I have a problem with an AJAX program I am coding. What it does is the user logs in then there is a select box that pulls data from an XML file. The user can select a value from the list that sends a request to pull info from the XML file and adds it to a table below the select list.
I am having problems after the user selects an item and the getAcctInfo function. Can some one help me with this?
[CODE]
<html>
<head>
<style>
#AcctInfo {
position: absolute;
left: 20px;
top: 150px;
height: 400px;
width: 1024px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<script>
var obj; /////Target Div////
var objAcctInfo;
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.overrideMimeType(“text/xml”); //XML
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}
////////Logon function////////
function validateLogon(dataSource, divID)
{
var aUser = document.getElementById(‘userid’).value;
var aPassword = document.getElementById(‘password’).value;
var data = aUser + ‘|’ + aPassword; //This create a delimited string
getXML(dataSource, divID, data);
return false;
}
function getAcctInfo(dataSource)
{
alert(“dataSource-getAcctInfo:” + dataSource);
alert(“Inside the getAcctInfo function:”);
var myAcctSelected = document.getElementById(“myaccts”).value;
alert(“myAcctSelected-getAcctInfo:” + myAcctSelected);
//displayXML(myAcctSelected);
getXML(myAcctSelected);
// return false;
}
////////Get XML data////////
function getXML(dataSource, divID, data, myAcctSelected, myLogonText)
{
alert(“myAcctSelected-getXML:” + myAcctSelected);
alert(dataSource + ” ” + divID + ” ” + data);
if(XMLHttpRequestObject)
{
obj = document.getElementById(divID);
XMLHttpRequestObject.open(“POST”, dataSource);
XMLHttpRequestObject.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
//eval(XMLHttpRequestObject.responseXML); //XML
var myXML = XMLHttpRequestObject.responseXML; //XML
displayXML(myXML, myAcctSelected, myLogonText);
}
}
XMLHttpRequestObject.send(“data=” + data);
}
}
////////display XML data///////
function displayXML(myXML)
{
alert(“Inside the displayXML”);
//program quits
alert(“XML: ” + myXML);
var XMLElements = myXML.getElementsByTagName(“logon”);
var myLogonText = XMLElements[0].firstChild.data;
//alert(‘XMLElements:’ + XMLElements);
//alert(“myLogonText: ” + myLogonText);
////Checks XML file///
if (myLogonText == “Error”)
{
//alert(“error”);
obj.innerHTML = “<br><font color =red> Error: User Id is not valid, please try again. </br></br> </font>”;
} else {
if (myLogonText == “Trans”)
{
alert(“myLogonText ==’Trans'”);
displayTrans(myXML);
return;
}
var CategoryElements = myXML.getElementsByTagName(“category”);
var myHTML = “<h2>Finances</h2>”;
var myHTML = myHTML + “Select Category:”;
var myHTML = myHTML + “<br> <select id=”myaccts” onChange=”getAcctInfo(‘displayTrans.php’, ‘AcctInfo’);”>n”;
myHTML = myHTML + “<option value='” + “-” + “‘>” + “-” + “</option>/n”;
for (loopIndex = 0; loopIndex < CategoryElements.length; loopIndex++)
{
var myData = CategoryElements[loopIndex].firstChild.data;
myHTML = myHTML + “<option value='” + myData + “‘>” + myData + “</option>/n”
}
var myHTML = myHTML + “</select>/n”;
///hides logon form////
var myLogonForm = document.getElementById(“LogonForm”);
myLogonForm.style.visibility = “hidden”;
var myTargetDiv = document.getElementById(“targetDiv”);
myLogonForm.style.position = “absolute”;
myLogonForm.style.top = “10px”;
///hides logon form-END////
obj.innerHTML = myHTML;
}
}
function displayTrans(myXML, getXML)
{
alert(“Inside the displayTrans function”);
var myCategoryElements = document.getElementsByTagName(“trans”);
alert(“myCategoryElements: ” + myCategoryElements);
//alert(“Inside the if XMLTableElements”);
var myHTML = “n<hr><table border=1>n”;
var myHTML = myHTML + “<tr><th>” + “Item” + “</th></tr>”;
for (loopIndex = 0; loopIndex < myCategoryElements.length; loopIndex++)
{
var myTableData = myCategoryElements[loopIndex].firstChild.data;
myHTML = myHTML + “<tr><th>” + myCategoryElements[loopIndex].firstChild.data + “</th></tr>”;
}
myHTML = myHTML + “</table>n”;
var objAcctInfo = document.getElementById(“AcctInfo”);
objAcctInfo.innerHTML = myHTML;
}
</script>
</head>
<body bgcolor=”#C0C0C0″>
<div id=LogonForm>
<H2>Logon</H2>
<form name=myform id=myform>
<table>
<tr>
<td>Userid:</td>
<td><input name=’userid’ id=’userid’ type=’text’ size=’10’></td>
</tr>
<tr>
<td>Password:</td>
<td><input name=’password’ id=’password’ type=’password’ size=’10’> </td>
</tr>
<tr>
<td> </td>
<td><br><input type=submit value=”Logon” onClick=”return validateLogon(‘validate_logonxml_accounts.php’, ‘targetDiv’)”></td>
</tr>
</table>
</form>
</div>
<div id=targetDiv>
</div>
<div id=selectDiv>
</select>
</div>
<div name=AcctInfo id=AcctInfo>
</div>
</body>
</html>
Thanks ?