PDA

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



jessicaq
02-19-2009, 11:10 PM
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
02-19-2009, 11:51 PM
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
02-20-2009, 01:54 AM
You may have to include this as well:

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

jessicaq
02-26-2009, 07:12 PM
Thank you very much!