Z.K. Posted September 6, 2009 Share Posted September 6, 2009 I have this sample ajax code and I cannot get it to work. I was wondering if someone might be able to help me as I don't really see anything wrong with it and it supposedly works. I put a bunch of alert messages just to see where it was going and the problem appears to be in the script inside the html file. This line: options = xmlDocument.getElementsByTagName("option"); does not put anything in the options variable so I am thinking that it is not getting the data from the options3.php file for some reason, but I am unsure as to why. I have these files on my IIS server which has successfully run asp.net, php, javascript and even perl. So, I don't think it is the server, but I am not sure as I am not a wiz with IIS. Any help would be appreciated. I need to get this working for an ajax class I am taking. options3.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Passing data using Ajax, POST, and XML</title> <script type="text/javascript" language="javascript"> var options; var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getoptions(scheme) { var url = "options3.php"; //alert("hello"); if(XMLHttpRequestObject) { XMLHttpRequestObject.open("POST", url); XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); alert("hello2"); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; options = xmlDocument.getElementsByTagName("option"); listoptions(); alert("hello3"); } } XMLHttpRequestObject.send("scheme=" + scheme); } } function listoptions () { alert("hello4"); var loopIndex; var selectControl = document.getElementById('optionList'); alert(options.length); alert("hello4b"); for (loopIndex = 0; loopIndex < options.length; loopIndex++ ) { alert("hello5a"); selectControl.options[loopIndex] = new Option(options[loopIndex].firstChild.data); alert("hello5"); if(loopIndex == 0) alert("hello6"); } } function setoption() { document.getElementById('targetDiv').style.color = options[document.getElementById ('optionList').selectedIndex].firstChild.data; } </script> </head> <body> <h1>Passing data using Ajax, POST, and XML</h1> <form action = "" method="POST"> <select size="1" id="optionList" onchange="setoption()"> <option id ="option" name="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" style=" width:100; height:100">Set the color of this text.</div> </body> </html> options3.php: <? if(isset($_POST["scheme"])){ header("Content-type: text/xml"); if ($_POST["scheme"] == "1") $options = array('red', 'green', 'blue'); if ($_POST["scheme"] == "2") $options = array('black', 'white', 'orange'); echo '<?xml version="1.0"?>'; echo '<options>'; foreach ($options as $value) { echo '<option>'; echo $value; echo '</option>'; } echo '</options>'; } ?> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.