AJAX help

[denzil]

Hey. I'm busy with an AJAX script for filtering out usernames when typing a username into a text box. What happens is that when you start typing in a username into the text box, it takes the characters in the box and matches it with what is in the database and then returns the results.

But because Ajax isn't always the fastest, especially not on free servers, I want to add a loading image. I get it right to hide and show the image (with what I believe one would call jQuery). However, when I try and combine everything it does not work. I know where the problem is, but I don't know how to fix it.

In the onload of the image, I call a JS function to hide the image. When someone enters something in the textbox, onkeyup calls an AJAX functions. First, I show the image and then the ajax should happen, and when it is done, the loading image should be hidden again. But what happens is the image is hidden immediately, even if the AJAX is not done loading.

Does anyone know how I can check for when the Ajax is done loading, so I can wait before hiding the image?

Thank you

Relevant code:

function usernameSearch(str)
  {
    if (str.length==0)
    { 
      document.getElementById("nameSearch").innerHTML="";
      document.getElementById("nameSearch").style.border = "0px";
      return;
    }
    else
    {
      $("#load").show(); //loading image show
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("nameSearch").style.border = "1px solid #A5ACB2";
        document.getElementById("nameSearch").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getUsername.php?q="+str,true);
    xmlhttp.send();
    $("#load").hide(); //loading image hide (a wait is needed here)
  }

 

[descalzo]

function usernameSearch(str)
  {
    if (str.length==0)
    { 
      document.getElementById("nameSearch").innerHTML="";
      document.getElementById("nameSearch").style.border = "0px";
      return;
    }
    else
    {
      $("#load").show(); //loading image show
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 ){
          $("#load").hide(); //loading image hide
          if(xmlhttp.status==200)
          {
              document.getElementById("nameSearch").style.border = "1px solid #A5ACB2";
              document.getElementById("nameSearch").innerHTML=xmlhttp.responseText;
          } else {
              ;// code, if any, to handle 404, 301, 500, etc server errors
          }
          }
    }
    xmlhttp.open("GET","getUsername.php?q="+str,true);
    xmlhttp.send();

  }

Move the hide code inside the onreadystatechange handler when you get a response. You have to separate it from the 200 (success) code, otherwise 500/404/301/etc errors will leave the image.

 

[denzil]

Cool thanx! Works like a charm.

I have another issue though. Perhaps not as important though. If I clear the textbox the Ajax reloads as if there is still a value in the box. For instance if I enter the letter b, it loads all names with b. Then I erase the b, it reloads all the user names with b. And then if I press backspace in the textbox again it clears it properly. Does this sound familiar to anyone?

---------- Post added at 07:47 PM ---------- Previous post was at 07:46 PM ----------



I also checked it in IE 8, and it did not work so well. In chrome the loading image would stay there the up to the very second the Ajax retrieves the names. In IE, however, the image would just seemingly randomly disappear, even though the names have not been retrieved yet.

 

[descalzo]

Second problem, move the .hide() to after the

if(xmlhttp.status==200) {
} else {
}

but still inside the

if (xmlhttp.readyState==4 ){

}

construct.

As to the first problem, how are you calling the usernameSearch ? ie, is it on change or on keypress, etc?

 

[denzil]

Thanks so much. I'd give you more rep if I could you have been very helpful. I will try it as soon as my website is back online. And I believe I was using onkeyup. Perhaps I should rather try on change. I'll try and figure it out first and then I'll post back, and let you know if I need more help.