#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    9
    Rep Power
    0

    [AJAX] getElementsByTagName() coming up null


    I searched the forum and saw a topic like this but i didn't find it useful.

    I use Google Chrome because of the Javascript debugger that comes included and I keep getting the following errors with my AJAX script

    Code:
    Uncaught TypeError: Cannot call method 'getElementsByTagName' of null option.html:23
    Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
    option.html:40
    option.html
    Code:
    <html>
    	<head>
    		<title>Options  </title>
    		<script language="javascript">
    			var XMLHttpRequestObject = false;
    			
    			if (window.XMLHttpRequest){
    				XMLHttpRequestObject = new XMLHttpRequest();
    				XMLHttpRequestObject.overrideMimeType("text/xml");
    			} else if(window.ActiveXObject){
    				XMLHttpRequestObject = new ActiveXObject("Micrsoft.XMLHTTP");
    			}
    			
    			function getoptions1()
    			{
    				if(XMLHttpRequestObject){
    					XMLHttpRequestObject.open("GET", "option1.php");
    					
    					XMLHttpRequestObject.onreadystatechange = function()
    					{
    						if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
    							var xmlDocument = XMLHttpRequestObject.responseXML;
    							options = xmlDocument.getElementsByTagName('option');
    							listoption();
    						}
    					}
    					
    					XMLHttpRequestObject.send(null);
    				}
    			}
    			function getoptions2()
    			{
    				if(XMLHttpRequestObject){
    					XMLHttpRequestObject.open("GET", "option2.php");
    					
    					XMLHttpRequestObject.onreadystatechange = function()
    					{
    						if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
    							var xmlDocument = XMLHttpRequestObject.responseXML;
    							options = xmlDocument.getElementsByTagName('option');
    							listoption();
    						}
    					}
    					XMLHttpRequestObject.send(null);
    				}
    			}
    			function listoption()
    			{
    				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.getElementById('optionList').selectedIndex.firstChild.data;
    			}
    		</script>
    	</head>
    	<body>
    		<h1>Using Ajax and XML</h1>
    		<form>
    			<select size="1" id="optionList" onchange="setoption()">
    				<option> Select an Option </option>
    			</select>
    			<input type="button" value="Use color scheme 1" onClick="getoptions1()">
    			<input type="button" value="Use color scheme 2" onClick="getoptions2()">
    		</form>
    		
    		<div id="targetDiv" width=100 height=100> Set the color of this text! </div>
    	</body>
    </html>
    option1.php
    PHP Code:
    <?php
    header
    ("Content-type: text/xml");
    $options = array('red''green''blue');
    echo 
    '<?xml version="1.0">';
    echo 
    '<options>';
    foreach (
    $options as $value)
    {
        echo 
    '<option>';
        echo 
    $value;
        echo 
    '</option>';
    }
    echo 
    '</options>';
    ?>
    option2.php
    PHP Code:
    <?php
    header
    ("Content-type: text/xml");
    $options = array('black''white''orange');
    echo 
    '<?xml version="1.0">';
    echo 
    '<options>';
    foreach (
    $options as $value)
    {
        echo 
    '<option>';
        echo 
    $value;
        echo 
    '</option>';
    }
    echo 
    '</options>';
    ?>
    What is supposed to happen is I press either button then it calls either getoptions1() or getoptions2() which then lists the options using listoption()
    Then the user selects a color and setoption() gets called. I'm having a problem with either getoption function or the listoption function. Can anyone help me.
  2. #2
  3. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    are all three files in the same directory? can you run other tests on the response? say, alert the responseText to see what the actual response looks like?

    I'd also try changing your variable name from 'options' (maybe 'responseOpts'?), and either declare it as a global right under XMLHttpRequestObject or (preferably) locally in the response function and then pass it to listoption(). the 'options' var name is too close for comfort to the select list .options property.

    other than that, everything looks pretty clean... my guess would be something silly (like the files in different dirs) or malformed xml (request processes, but xmlResponse comes back null).

    good luck! -- derelict

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    9
    Rep Power
    0

    [Ajax]


    Code:
    function getoptions2()
    			{
    				if(XMLHttpRequestObject){
    					XMLHttpRequestObject.open("GET", "option2.php");
    					
    					XMLHttpRequestObject.onreadystatechange = function()
    					{
    						if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
    							var xmlDocument = XMLHttpRequestObject.responseXML;
    							optRes= xmlDocument.getElementsByTagName('option');
    							alert(optRes);
    							listoption();
    						}
    					}
    					XMLHttpRequestObject.send(null);
    				}
    			}
    optRes is declared globally, and no alert box pops up
    Just checking, is the php foreach syntax kosher?
  6. #4
  7. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    just did a quick google search to refresh my memory... try changing:

    var xmlDocument = XMLHttpRequestObject.responseXML;


    to


    var xmlDocument = XMLHttpRequestObject.responseXML.documentElement;


    not sure but this may be what chrome expects to actually get at the xml doc. Also, where you get that responseXML, you can just try alert(XMLHttpRequestObject.responseText) to see what the text of the response actually looks like, if you're worried about your foreach syntax (I'm not a php guy).

    hope this helps! -- derelict

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    9
    Rep Power
    0
    with the .documentElement I got a new error
    Uncaught TypeError: Cannot read property 'documentElement' of null

    and w/o it i just get this
    Uncaught TypeError: Cannot call method 'getElementsByTagName' of null

    and the alert doesn't come up still the alert is after the error though/
  10. #6
  11. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    try moving the alert to the beginning of the response function, and see if that gets you a result. your response function does not seem to be able to get at an XML payload from the response. also try just loading the php files themselves in a browser and make sure you're getting the desired response out of the file. good luck!

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  12. #7
  13. Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2003
    Posts
    2,346
    Rep Power
    578
    You forgot a "?" in your xml tag
    Code:
    echo '<?xml version="1.0"?>';

    Comments on this post

    • derelict agrees : d'oh -- it's always the simple things...
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Location
    Katy, Texas
    Posts
    495
    Rep Power
    199
    Originally Posted by Deminyx
    . . .
    option1.php
    PHP Code:
    <?php
    header
    ("Content-type: text/xml");
    $options = array('red''green''blue');
    echo 
    '<?xml version="1.0">';
    echo 
    '<options>';
    foreach (
    $options as $value)
    {
        echo 
    '<option>';
        echo 
    $value;
        echo 
    '</option>';
    }
    echo 
    '</options>';
    ?>
    option2.php
    PHP Code:
    <?php
    header
    ("Content-type: text/xml");
    $options = array('black''white''orange');
    echo 
    '<?xml version="1.0">';
    echo 
    '<options>';
    foreach (
    $options as $value)
    {
        echo 
    '<option>';
        echo 
    $value;
        echo 
    '</option>';
    }
    echo 
    '</options>';
    ?>
    Both XML documents are bad. Try this:
    Code:
    echo '<?xml version="1.0"?>';

    Comments on this post

    • Markisdee disagrees : I just said that 8 hours ago in the last post
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    9
    Rep Power
    0
    Originally Posted by TheOtherDino
    Both XML documents are bad. Try this:
    Code:
    echo '<?xml version="1.0"?>';
    thank you guys so much problem solved!
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Location
    Katy, Texas
    Posts
    495
    Rep Power
    199
    I had sort of a similar error last week. I could not get Javascript to parse my XML document. I tried (what seemed like) every xml parsing option in the book. I fought with it for hours. Then, I looked very closely at my document. The document was built in Ruby and was passed to javascript.:

    Code:
     
    mydoc = " <?xml version='1.0'?>" << other doc tag stuff....
    The problem was the very first space. It ate my lunch.

IMN logo majestic logo threadwatch logo seochat tools logo