Ajax/JavaScript Question: Loading Image Working?

Discussion in 'JavaScript' started by PHPGator, Jul 28, 2009.

0
  1. #1
    Hello all,

    As you will quickly eb able to see by my question I have not been working with JavaScript or AJAX very long. I want to have a user type in a textfield and onchange have it pop up a "loading" image. Once the information is received, then change to a message of some kind.

    Here is the code I am using. Unfortunately (or maybe fortunately), I never actually see the image for "loading" pop up. I'm not sure if it just isn't actually working, or if the loading is going so fast i'm unable to see it.

    Here is the code I am using:

    <html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
  
var progressimage = '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />';
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.getElementById("txtChange").innerHTML=progressimage
  document.getElementById("txtChange").innerHTML=xmlhttp.responseText; // Changes a String
  }
}
xmlhttp.open("GET","hello3.php",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onchange="ajaxFunction();" />
String Change: <span id="txtChange"></span>
</form>

</body>
</html>
    Code (markup):
    It should be taking what is being echo'd in hello3.php and displaying it. But before that, I am setting the HTML to show a "loading image" which can be seen here: http://images.code-head.com/progress-bars/4.gif

    Is this actually happening using the above method? And can someone explain to me why it would not be working?
     
    PHPGator, Jul 28, 2009 IP
  2. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Hi PHPGator,

    I will try to explain...
    You loading image is actually displayed (= document.getElementById("txtChange").innerHTML=progressimage), but only for a fraction of ms, because you assign right after that the response from server (= document.getElementById("txtChange").innerHTML=xmlhttp.responseText) into the same element. That's it. It's similar to PHP command sequence : <?php $var = 'image'; $var = 'string'; echo $var; ?>

    If you want to display the image for users when the AJAX call takes too long time, it's best to play with readyState.
    if(xmlhttp.readyState==4)
    {
    document.getElementById("txtChange").innerHTML=xmlhttp.responseText; // Changes a String
    }
    else if(xmlhttp.readyState > 0)
    {
    document.getElementById("txtChange").innerHTML=progressimage
    }

    I used "xmlhttp.readyState > 0" to prevent infinite loop when the ajax call is not initialized. Also note that readyState - 4 doesn't always mean you got correct response, and you should also check its status. In your case :
    if(xmlhttp.readyState==4)
    {
    if(xmlhttp.status==200)
    {
    document.getElementById("txtChange").innerHTML=xmlhttp.responseText; // Changes a String
    }
    }
    else if(xmlhttp.readyState > 0)
    {
    document.getElementById("txtChange").innerHTML=progressimage
    }

    I hope it helps you to see the ajax flow. Otherwise check any AJAX tutorial, and read more about status codes and ready states. The lines above are not the ultimate AJAX handler.
     
    lp1051, Jul 29, 2009 IP