My first thought is that there is a mistake in the tutorial as it doesn't assign the name "activities" to any of the elements. So I tried to give it to the form and then the "query" div, but that didn't make any difference.
The page is supposed to display a task for the day when you select a day from the drop down box.
Javascript is one of my weak areas, and I don't know much beyond the basics about the DOM.
Can anyone tell me how to get this to work?
anyway this is what I've got:
Code: Select all
<html>
<script type="text/javascript">
<!--
function createRequestObject() {
var ro;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function makeRequest(){
http.open('get', 'http://localhost/experiments/ajax/example.xml');
http.onreadystatechange = processResponse;
http.send(null);
}
function processResponse(){
if(http.readyState == 4){
var xmldoc = http.responseXML;
var d = document.activities.select_day.selectedIndex;
var day = document.activities.select_day.options(d).value;
var myActivity = xmldoc.getElementByTagName(day).item(0).firstChild.data;
document.getElementById('result').innerHTML = myActivity;
}
}
//-->
</script>
<body>
<div id="query">
<p>Select a day from the drop-down menu:</p>
<form>
<select id="select_day" onChange="javascript:makeRequest();">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
</form>
</div>
<div id="result"></div>
</body>
</html>Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
<days>
<day name="Sunday">Sleep</day>
<day name="Monday">Learn AJAX</day>
<day name="Tuesday">Give up on AJAX</day>
<day name="Wednesday">Throw magazine away</day>
<day name="Thursday">Quit job</day>
<day name="Friday">Go to JobCenter</day>
<day name="Saturday">Sleep some more</day>
</days>