Help please: How to add a "Please wait ." message in my inner page

[jessicaq]

Hi,

I've been stuck here over one week.

I need to dynamically update an inner part of my page, during the updating, I want this area to show a "Please wait..." massage and a spinning image. And after the area finishes updating by new content, the 'Please wait' msg and the spinning wait image will disappear. The following is an example I made -- when clicking the "Replace Text" link, "Hello World" will be replaced by a list box which contains database data. But it is not working correctly: when I click the link, the wait message and the spinning wait image appear, but after all the update finishes, the wait message and the image are still there (they are supposed to disappear). What's wrong with my code? Can anybody give me a correct example?

Thank you very much!

Ajax.html------------------------------

<script type="text/javascript">
var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

function replace() {
http.open("GET", "rpc.php", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>

<p><a href="javascript:replace()">Replace Text</a></p>

<div id="foo">
Hello, world!

</div>

rpc.php----------------------------------------------

<?php

$dbhost = "localhost";
$dbuser = "fossilplot";
$dbpass = "fossilplot";
$dbname = "fossilplot";
mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname) or die(mysql_error());
$result = mysql_query("select * from genus");

echo "<div id=\"hidelater\"><img src=\"loading.gif\"> Please Wait, loading
data...</div>";
ob_flush(); flush();

echo "<select name=\"sel\" multiple size=\"63\">";

while ($row = mysql_fetch_array($result)) {
echo "<option>".$row{'genus_name'}."</option>";
}

echo "</select>";

echo "<script>document.getElementById(\"hidelater\").style.display = 'none';
</script>";

?>

[Nile]

Replace:

http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML = http.responseText;
}
}

With:

http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML = http.responseText;
} else {
var a = document.createElement("img");
a.src = "loading.png";
document.getElementById('foo').appendChild(a);
}

I'm new to the DOM kinda stuff.... I don't know if it will work.

[mburt]

You may have to include this as well:

if (http.status == 200) document.getElementById('foo').innerHTML = http.responseText;

[jessicaq]

Thank you very much!