New Topic/Question
Reply
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
MultiQuote
| 