[SOLVED] I can't get a tutorial to work.

[Zeradin]

I'm doing this tutorial from ajax for dummies and it's proving I'm a dummy. I'm apparently a slow learner with this. I have the ebook so I don't have the supplemental materials, so I can't see the whole example. The page loads two color schemes to color text. I can't learn things by abandoning an example that I don't understand how to fix. Please help.

 

I have this that loads the information from options1.php

<form>
<select size="1" id="optionList" onchange="setOption()">
<option>Select a Scheme</option>
</select>
<input type="button" value = "Use Color Scheme 1" onclick = "getOptions('1')">
<input type="button" value = "Use Color Scheme 2" onclick = "getOptions('2')">
</form>
<div id="targetDiv" width = 100 height = 100>Color this Text</div>

 

I know options1.php works because I can go to it and it'll show the xml file just fine.

 

and here are my functions:

var options;

function listOptions() {
var loopIndex;
var selectControl = document.getElementById('optionList');
for (loopIndex = 0; loopIndex < options.length; loopIndex++) {
selectControl.options[loopIndex] = new Option(options[loopIndex].firstChild.data);
}
}

function setOption() {
document.getElementById('targetDiv').style.color = options[document.getElementById('optionsList').selectedIndex].firstChild.data;
}

function getOptions(scheme) {
var url = "options1.php?scheme="+scheme;
if (XMLHttpRequestObject){
XMLHttpRequestObject.open("GET", url, true);

XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readystate == 4 && XMLHttpRequestObject.status == 200){
var xmlDocument = XMLHttpRequestObject.responseXML;
options = xmlDocument.getElementByTagName("option");
listOptions();
}
}
XMLHttpRequestObject.send(null);
}
}

 

thanks

[Zeradin]

Oh here's what happens: http://hypboard.com/ajax/options.html

[Maq]

So nothing happens...?  Looks like it's not even getting to the if statement.  Can you output the url in the if statement?

[xtopolis]

XMLHttpRequestObject.readyState == 4

.--------------------------^  needs to be a capital S

 

options = xmlDocument.getElementsByTagName("option");

---------------------------------^ needs an s

 

 

Otherwise it worked fine, populated the left side drop down with colors...

[Zeradin]

Worked great. I'll have to be more careful. Thanks!