Help with a simple AJAX tutorial

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Help with a simple AJAX tutorial

Post by Skittlewidth »

I've just tried this tutorial from WebDesigner magazine, and I think I've copied it out correctly but unfortunately the printing is smudged on that page, and to make things worse the font is point 2 or something! Plus, this mini example isn't on the cover cd.

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>
and the xml file

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>
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

Ok, so I know where my problem is but still can't solve it.

I've named my form and my select box as well as giving them ids and its submitting the right data to the processResponse() function.

However I can't seem to target the contents of the xml file correctly, mostly because I don't understand the DOM correctly I expect.

This is the problem line as copied from the mag:

Code: Select all

var myActivity = xmldoc.getElementsByTagName(day).item(0).firstChild.data;
The var day will be a string, like "Monday", which corresponds to a tag in the XML file.
If you are getting the element by tag name I presume that you are navigating direct to that tag and then need only get its value.

I've tried the above code which was in the tutorial, and get nothing. Then I tried just putting data or NodeValue or value after the getElementsByTagName() which returned "undefined". Some other combinations of the above bit of code produced null and just terminating the line after getElementsByTagName() returns "[object]".

I'm pretty sure my XML is properly formed (for this excercise anyway). How do I get that data out?
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

ok my solution:

Code: Select all

var myActivity = xmldoc.getElementsByTagName('day').item(d).firstChild.data;
Which may well be what it said in the magazine but it was just so small and blurred!

Another of my posts solved by me! :)
Post Reply