tags:

views:

35

answers:

2

I have a page which checks a form for valdation, the main checks are for if the email or username is already in the database. I have this working fine, but I cannot figure out how to add a loading image...for when the user changes either username or email when it is being checked.

my fucntion to check username is below, its similar for the checking email

function check_username(username)
{
var httpRequest;
make_request()
function stateck() 
 {

 if(httpxml.readyState==4)

  { 
  if (httpxml.responseText.indexOf ("Username Ok") >= 0)
  {
   document.getElementById("username").style.backgroundColor = "green";
   document.getElementById("username").style.color = "white";
   document.getElementById("username_div").style.display = 'none';
   usernameok = true;

  }

   else 
  {
   document.getElementById("username").style.backgroundColor = "red";
   document.getElementById("username_div").style.visibility = 'visible';
   document.getElementById("username_div").innerHTML=httpxml.responseText;
   usernameok = false;

  }
  checkCanSubmit();   
  }


 }

httpxml.onreadystatechange=stateck;
user_url="check_username.php?username=" + username.value;
httpxml.open("GET",user_url,true);
httpxml.send(null);
}

Thanks alot...btw I have already tried jquery libary, and I prefer it this way. cheers

A: 

First, use http://www.ajaxload.info/ to generate a nice animated gif. Then, when check_username is called (before any other calls) create a div which has your animated gif as its background-image. There are countless ways to do this (inline, as an overlay, etc.) so it's really up to you. Last, when check_username finishes, remove the div (or at least clear the animated background-image).

Matt Ball
Thanks, I call check_username on the blur of the textbox...could I add the image function before this? such as two functions inside a on blur
Elliott
You can call the image function immediately upon entering check_username.
Matt Ball
+1  A: 

ajaxload.info does indeed work well, but you don't need to bother with a div and background-image. Simply create an , using document.createElement, then set the src of the image, then add it to your document:

var img = document.createElement('img');
img.src = '<the URL of your loading image>';
function stateck() {
    ...

Now you can insert the newly created img into your document, then remove it in stateck().

pianohacker
Good point about the background image. Personally, I prefer to do it that way because it feels more webapp-y (for instance, you can't click, right-click, or click-and-drag the gif). It's nothing more than a preference.
Matt Ball
ok thanks, how would I remove the image? is there a hide function etc
Elliott
Ahh, I hadn't thought of that. Previously, I'd used this trick inside a <button>, so that wasn't an issue. Theoretically the best way to use it would be a background-image on an existing element, but that might not be possible in Elliott's case.
pianohacker
Elliot: If you'd added it to, say the "username" div, you would do the following: document.getElementById("username").removeChild(img);P.S. You might want to look into jQuery (http://jquery.com/); it makes common stuff like DOM manipulation and AJAX much easier.
pianohacker
I carnt seem to get it working....how do I actually show the img ?
Elliott