Need some help in JS & retrieve of XML infomation [Archive]

iknow

11-15-2008, 01:53 AM

<html>
<head>
<title>Chinese Food</title>
<script type="text/javascript">
var chinese = ["name", "calories","totalfat","totalcarbs"];
var name="";
var calories="";
var totalfat="";
var totalcarbs="";
var i=0;
var backMenuItem= null;
function loadData(URL,i)
{

xmlReq = null;
if(window.XMLHttpRequest) xmlReq = new XMLHttpRequest();
else if(window.ActiveXObject) xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
if(xmlReq==null) return;

xmlReq.onreadystatechange = function()
{
switch(xmlReq.readyState)
{
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
case 4:

name = xmlReq.responseXML.getElementsByTagName('name')[i].firstChild.data;
calories=xmlReq.responseXML.getElementsByTagName('calories')[i].firstChild.data;
totalfat = xmlReq.responseXML.getElementsByTagName('totalfat')[i].firstChild.data;
totalcarbs = xmlReq.responseXML.getElementsByTagName('totalcarbs')[i].firstChild.data

showResult();

break;
default:
break;
}
}

xmlReq.open ('GET', URL, true);
xmlReq.send (null);
}

function showResult()
{

document.getElementById("menuview").style.display = "none";//hide title

document.getElementById("resultView").style.display = "block";

var child = document.getElementById('name').firstChild;
if (child != null)

document.getElementById('name').removeChild(child);

var newText = document.createTextNode("Food Name:"+name);

document.getElementById('name').appendChild(newText);

child = document.getElementById('calories').firstChild;
if (child != null)
document.getElementById('calories').removeChild(child);
newText = document.createTextNode("calories:"+calories);
document.getElementById('calories').appendChild(newText);

child = document.getElementById('totalfat').firstChild;
if (child != null)
document.getElementById('totalfat').removeChild(child);
newText = document.createTextNode("totalfat:"+totalfat);
document.getElementById('totalfat').appendChild(newText);

child = document.getElementById('totalcarbs').firstChild;
if (child != null)
document.getElementById('totalcarbs').removeChild(child);
newText = document.createTextNode("totalcarbs:"+totalcarbs);
document.getElementById('totalcarbs').appendChild(newText);

}

function doCheck(strForm){

objForm = document.getElementById(strForm);
for(i=0; i < objForm.elements.length; i++)
if(objForm.elements[i].checked == true)
{
alert( i + " was selected.")
loadData("foodData/chinesefood.xml",i);
}

showResult();
}

function unCheckAll(strForm){

objForm = document.getElementById(strForm);
for(i=0; i < objForm.elements.length; i++)
objForm.elements[i].checked = false;
}

</script>
</head>

<body>
<div id="menuview">
<p id="content"> </p>
<p align="center"><u><font size="4" color="#800000"><b>Select Food</b></font></u></p>
<form id="chineseMeal" method="POST" action="--WEBBOT-SELF--">

<p align="left"><input type="checkbox" name="C1" value="ON"><span lang="EN-US" style="font-size: 21.0pt; line-height: 115%; font-family: Calibri; color: #296DC0; text-transform: uppercase">Meals:
Chicken & Broccoli</span></p>
<p align="left"><input type="checkbox" name="C2" value="ON"><span lang="EN-US" style="font-size: 21.0pt; line-height: 115%; font-family: Calibri; color: #296DC0; text-transform: uppercase">Meals:
Rice, Fried Rice</span></p>
<p align="left"><input type="checkbox" name="C3" value="ON"><span lang="EN-US" style="font-size: 21.0pt; line-height: 115%; font-family: Calibri; color: #296DC0; text-transform: uppercase">Meals:
Crab Rangoon</span></p>
<p align="left"><input type="checkbox" name="C4" value="ON"><span lang="EN-US" style="font-size: 21.0pt; line-height: 115%; font-family: Calibri; color: #296DC0; text-transform: uppercase">Appetizers:
Soup, Egg Drop w. noodles</span></p>
<p align="left"><input type="checkbox" name="C5" value="ON"><span lang="EN-US" style="font-size: 21.0pt; line-height: 115%; font-family: Calibri; color: #296DC0; text-transform: uppercase">Meals:
Sweet & Sour Pork</span></p>
</form>
<form method="POST" action="--WEBBOT-SELF--">


<p align="center">
<input type=button value="Submit" name="B1" onClick="doCheck('chineseMeal');">

<input type="reset" value="Reset" onClick="unCheckAll('chineseMeal');" name="B2">

</p>
</form>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="resultView">

<p id="name"></p>
<p id="calories"></p>
<p id="totalfat"></p>
<p id="totalcarbs"></p>
</div>

</body>
</html>

XML :

chinesefood.xml:
<?xml version="1.0" encoding="utf-8"?>
<food>
<name>chicken and broccoli</name>
<calories>660</calories>
<totalfat>26g</totalfat>
<totalcarbs>45</totalcarbs>
</food>

Wanna get chicken and broccoli/660/26g/45 on the output