Hi,
I have a page that let user can search a large database. While loading the database, I want to put a animated gif to display "Please wait while loading the database" and after loading the database, this image will kill itself.
i use the javascript explained by the member Helj
like below
Actually, you can't really do it using ASP since this is a client-side run-time change. What you need to do is make this happen using JavaScript. It's actually pretty easy, so don't worry.
You need to create two 'sections' using the <div> tag, like so:
<div id="divSearch">
... insert your code for your search form here ...
</div>
and then you need another div for your please wait display, but this one you mark as hidden, using CSS, like so:
<div id="divWait" style="display:none">
... PLEASE WAIT HTML HERE ...
</div>
Now, when you load the page, the HTML in the divPleaseWait area is hidden, and what is in the first div shows up.
What you do is add an onclick() event to whatever triggers your search to start. So if you have a button on a form, for example, add this to your button html:
<input type="submit" name="submit" onclick="showWaitLayer()">
the showWaitLayer() is just a call to a Javascript function that you put in the <head></head> element of your HTML, like so:
<head>
<script language="JavaScript">
////////////////////////
//showWaitLayer function
////////////////////////
function showWaitLayer()
{
// this hides the first layer
divSearch.style.display = 'none';
// this hides the first layer
divWait.style.display = '';
}
</script>
</head>
That should be all you need to do, and you can pretty much do whatever you want.
The key is to show a layer right before you submit a form that calls another page, this way while your page is loading, you get to see this form. Kinda like the expedia.com website does when you run a search for plane tickets.
My question is, After I use the image instead of the text, the animated image is not anymore animated. It just become the static image.
I made the following modification to the above too
divSearch.style.visibility
= 'hidden';
divWait.style.visibility = 'visible';
Also, you'll need to change the references in the div tags themselves, to:
<div id="divSearch" style="visibility:visible"
>
and
<div id="divWait" style="visibility:hidden">
Still the image is not animated. If anybody can help me, I appreciate that.
Thank you,
Kalagappan
