Loading files through AJAX/JS problem

utb

03-20-2009, 12:06 AM

Hi,

I am making a mashup, but I am having problems loading each file into the main page. I am using AJAX to call news.php, weather.php and images.php which all contain feed information. However the index page only loads the images.php whilst the ajax spinners are displayed in the news and weather div.

<script type="text/javascript">
var limit = 5;

loadImageRed = new Image();
loadImageRed.src = "http://webforumz.com/images/ajax-loader-red.gif"; //Pre load ajax loader image

loadImageClear = new Image();
loadImageClear.src = "http://webforumz.com/images/ajax-loader-clear.gif"; //Pre load ajax loader image

function loadFeeds() //Load the feeds when page loads
{
submitRq("Weather","weather.php");
submitRq("Images","images.php");
}

function loadNews() //Loads the news
{
rqNews(); //Calls request news function
}

function rqNews() //Request news
{
xhr = new XMLHttpRequest();
submission = "limit="+ limit;
xhr.open("GET", "news.php?" + submission);
xhr.onreadystatechange = processNews;
xhr.send(null);
}

function submitRq(feed, url) //Gets the Weather and Images
{
xhr = new XMLHttpRequest();
xhr.open("GET", url);
var feed = "process"+feed;
xhr.onreadystatechange = eval(feed);
xhr.send(null);
}

function processNews()
{
document.getElementById("news").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-red.gif" /></div>';
if (xhr.readyState == 4)
{
document.getElementById("news").innerHTML = xhr.responseText;
}
}

function processWeather()
{
document.getElementById("weather").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-clear.gif" /></div>';
if (xhr.readyState == 4)
{
document.getElementById("weather").innerHTML = xhr.responseText;
}
}

function processImages()
{
document.getElementById("image").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-clear.gif" /></div>';
if (xhr.readyState == 4)
{
document.getElementById("image").innerHTML = xhr.responseText;
}
}

function addNews() //Add or remove news items
{
xhr = new XMLHttpRequest();
submission = "limit="+ document.getElementById("id").value;
xhr.open("GET", "news.php?" + submission);
xhr.onreadystatechange = processNews;
xhr.send(null);
}
</script>

</head>
<body onload="loadFeeds()">
<div id="wrapper">
<div id="container">
<div id="header"><img src="http://webforumz.com/images/banner.png" width="500" height="60" /></div>
<div id="content">
<div id="left_column">
<div class="title">News:<br /><br />
<script language="javascript">
loadNews();
</script>
<div id="news">
</div>
<form action="#">
Number Of News Items To Show: <input type="text" size="2" maxlength="2" id="id" value="5" onkeyup="addNews()"/>
</form>
</div>
</div>
<div id="right_column">
<div id="weather">
</div>
<br /><br />
<div id="image">
</div>
</div>
<div id="footer">
Copyright 2009
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope you can help, Thanks in advance!

A1ien51

03-20-2009, 12:51 AM

You are using the same global variable for all your requests.

Eric

Old Pedant

03-20-2009, 12:59 AM

No, it's worse than that.

He is using a *LOCAL* variable for each request. And of course the local variable disappears when the function is finished.

*********

Second thoughts: Hmmm...if that were true, then how did he get a state change callback at all. Yeah, must be a single global.

Old Pedant

03-20-2009, 01:12 AM

How about this code, instead:

<script type="text/javascript">
var limit = 5;

// global to hold the XMLHttpRequest objects:
var xmlObjs = new Array( );

function loadFeeds() //Load the feeds when page loads
{
submitRq("weather", processWeather,"weather.php", "clear");
submitRq("image", processImages,"images.php", "clear");
submitRq("news", processNews,"news.php?limit=" + limit, "red");
}

function submitRq(which, processer, url, img)
{
document.getElementById(which).innerHTML =
'<div align="center"><img src="http://webforumz.com/images/ajax-loader-'+img+'.gif" /></div>';

xmlObjs[which] = new XMLHttpRequest();

var xhr = xmlObjs[which];
xhr.open("GET", url);
xhr.onreadystatechange = processor
xhr.send(null);
}

function processNews() { process("news"); }
function processImages() { process("image"); }
function processWeather() { process("weather"); }

function process(which)
{
var xhr = xmlObjs[which];
if (xhr.readyState == 4)
{
document.getElementById(which).innerHTML = xhr.responseText;
}
}
</script>
...
<body onLoad="loadFeeds( )">

Old Pedant

03-20-2009, 01:15 AM

This part seems silly to me:

document.getElementById(which).innerHTML =
'<div align="center"><img src="http://webforumz.com/images/ajax-loader-'+img+'.gif" /></div>';

Why no just START OFF, with an image in each of those divs??? Why load it dynamically?

Oh...and I did pull out the preload of the images, as it was useless. The code was almost surely plunking the images into the <DIV>s before the preload was even finished.