FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

ajax help

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


kv
I have developed few pages using ajax. Now, I want to display a "Loading. Wait" message to users when they click something like gmail does. How do I do this?
rohan2kool
since you haven't provided the source here, i'll give u the sol. in a generic case.

Assume the following:

Code:

var xhr = new XMLHttpRequest(); //The XMLHttpRequest object

<p id="loading"></p> //where you gonna show the 'loading' page


Now, here's the deal:

Code:


var showStatus = document.getElementById('loading');

xhr.open('GET', 'contactpage.php');
xhr.onreadystatechange = processFurther;
//First set the status to 'loading' and then send the data
showStatus.innerHTML = '<font color="#FF0000">Loading</font>";
xhr.send(null);

function processFurther() {
   if(xhr.readyState == 4) {
      //Since we have reached here, the loading is complete
      showStatus.innerHTML = "";
      if(xhr.status == 200) {
         var data = xhr.responseText;
         //Do whatever you want to do :D
      }
   }
}


hope it helps Very Happy
kv
Thanks. It is so simple! I thought it would require iframe.
rohan2kool
kv wrote:
Thanks. It is so simple! I thought it would require iframe.


huh?? what's the iframe gotta do with it? anyways.. gald it helped you Very Happy
kv
rohan2kool wrote:

huh?? what's the iframe gotta do with it? anyways.. gald it helped you Very Happy


Thought that "loading" thing is a floating iframe which will be made visible/hidden during and after ajax calls.
rohan2kool
kv wrote:

Thought that "loading" thing is a floating iframe which will be made visible/hidden during and after ajax calls.


then that'd be a CSS question. Coz, that's a floating <div> (most probably). If you'd like help with that too, here's how to do it:

Code:

<html>
 <head>
  <style type="text/css">
  <!--
  #loading {
       position: absolute;
       top: 2px;
       right: 2px;
   }
   -->
  </style>
 </head>

 <body>
  <div id="loading"><p>Loading</p></div>
 </body>
</html>


Now, to hide it (using javascript):

Code:

document.getElementById('loading').style.display = "none";


To show it, once it's hidden:

Code:

document.getElementById('loading').style.display = "";


hope it helps Very Happy
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.