3 Replies - 14057 Views - Last Post: 25 January 2011 - 12:11 AM

#1 Delta_Echo  Icon User is offline

  • D.I.C Addict

Reputation: 5
  • View blog
  • Posts: 722
  • Joined: 24-October 07

Uncaught TypeError: Cannot call method 'getElementsByTagName'

Posted 24 January 2011 - 04:19 AM

I have been trying to figure this out all day/night. And I have exhausted all my ideas....

so heres whats happening:

Ajax.js:
var	request = new XMLHttpRequest();
var response;
var currentHeadLineItem = 0; // iterator for which <li> node we
								// select from our xml document response
var lengthOfHeadLineList = 0; // Review the offsett for this!!!!

function getList()				
{
	request.onreadstatechange = function ()
	{
			// ...on ready state change do...
			if(request.readyState == 4){
				alert(request.getAllResponseHeaders());
				if(request.status == 200)
				{
					response = request.responseXML;
				}
			}
	}
	request.open('GET','backend.php',true);
	request.send();
	currentHeadLineItem = 0;
	lengthOfHeadLineList = response.getElementsByTagName('li').length;
}

function prev()
{
	if(currentHeadLineItem == 0)
	{
		currentHeadLineItem = lengthOfHeadLineList - 1; 
		updateHTML();
	}
	else
	{
		currentHeadLineItem--;
		updateHTML();
	}
}

function next()
{
	if(currentHeadLineItem == lengthOfHeadLineList - 1)
	{
		currentHeadLineItem = 0;
		updateHTML();
	}
	else
	{
		currentHeadLineItem++;
		updateHTML();
	}
}


function updateHTML()
{
	document.getElementById('headline').textContent = 
		response.getElementsByTagName('headline')[currentHeadLineItem].textContent;
	document.getElementById('subline').textContent = 
		response.getElementsByTagName('subline')[currentHeadLineItem].textContent;
}



backend.php

<?php
header('Content-type: text/xml');
// MySql connection
$link = mysql_connect('localhost','root','deltadelta1');
@mysql_select_db('company',$link);
$result = mysql_query("SELECT * FROM company.hl");


// Return Xml 

echo '<?xml version="1.0" ?>';
echo '<headLineList>';

for ($index = 0; $index < mysql_num_rows($result); $index++) {
	// Set current loop iteration variables
	$current_headLine = mysql_result($result,$index,'headline');
	$current_subLine  = mysql_result($result,$index,'subline');
	$current_link     = mysql_result($result,$index,'link');
	
	echo "<li><headline>$current_headLine</headline>" .
			"<subline>$current_subLine</subline>" .
			"<link>$current_link</link></li>";
}
echo '</headLineList>';

// MySQL Cleanup
mysql_close($link);

?>



The output of this script as in my test environment:

<?xml version="1.0" ?><headLineList><li><headline>President shot in head.</headline><subline>Witnesses report seeing tupac on seen.</subline><link>http://www.google.com</link></li><li><headline>USDA:"Corn is evil."</headline><subline>Causes death and retardation.</subline><link></link></li><li><headline>Google: "Gmail is so much better than hotmail</headline><subline>It's ajax motherfucker!</subline><link></link></li></headLineList>



Index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="ajax.js" />
		<script type="text/javascript">
			getList();
		</script>
	</head>
	
	<body>
		<div id="hl">
			<input type="button" class="button" name="prev" value="prev" id="prev"/>
				<h1 id="headline"></h1>
				<h2 id="subline"></h2>
			<input type="button" class="button" name="next" value="next" id="next" />
		</div>
		<script type="text/javascript">
			document.getElementById('prev').onclick = prev;
			document.getElementById('next').onclick = next;
			updateHTML();
		</script>
	</body>
</html>



So what i want to happen here is:

Page loads,
javascript fetchs xml output of backend.php,
does some stuff, puts relevant data into <h1> and <h2>,
user clicks either next or prev, and the corresponding functions are called.

I get this on run (google chrome javascript console): [the error is on line 58 of ajax.js]
Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined 
updateHTML
(anonymous function)



It seems for whatever reason 'response' is staying null?


I have no idea wtf....
Please help....
thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Uncaught TypeError: Cannot call method 'getElementsByTagName'

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Uncaught TypeError: Cannot call method 'getElementsByTagName'

Posted 24 January 2011 - 09:10 AM

Hi, one thing I see right away is:
request.onreadstatechange

//should be 
request.onreadystatechange



That could be causing your problem, hope this helps :-)
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Uncaught TypeError: Cannot call method 'getElementsByTagName'

Posted 24 January 2011 - 12:51 PM

thatís one point, but thereís one other. when you get to line 23, your request is not finished (because itís asynchronous), thus response is still undefined. you would have to move that line in the event handler.
Was This Post Helpful? 1
  • +
  • -

#4 Delta_Echo  Icon User is offline

  • D.I.C Addict

Reputation: 5
  • View blog
  • Posts: 722
  • Joined: 24-October 07

Re: Uncaught TypeError: Cannot call method 'getElementsByTagName'

Posted 25 January 2011 - 12:11 AM

Thanks both of you =)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1