If else - xmlhttp - novice

Hi all, I’ve created a simple dropdown which activates the below code showing user details from my DB. The problem is that I’m getting 0.4-1sec delay between changes and need to add my loading.gif just to give the user some feedback.

How and where do I add - else load (images/loading.gif) until the content is ready.

xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    }

Much appreciated thank you

One small issue if anybody can help?

How do I add a jquery transition to XMLHttpRequest?
You can see I’ve added a click function below, no errors but no transition is working, any ideas?
I also have the jquery lib above this thanks.

function showUser(str)
    {
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    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("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    document.getElementById("txtHint").innerHTML='<p style="text-align:center; padding-top:10px">loading...</p>';

    $("option").click(function() {
		var txtHint = $(this).find("ul").attr("user_box"); //Find the rel attribute value to identify the active tab + content
		$(txtHint).fadeIn(); //Fade in the active content
		return false;
	});
    }

Thank you :cool:

You can always have your web page cache the image by loading the image first before it’s needed. Such as, loading it in to a hidden element, or to one that’s offscreen, or even just scripting the creation of an image object as the page loads.

Yes, since ther’s no realistic way to obtain a reference to it from within the event. The only ways around that are to create a function that returns the target element, or to place the target element in a global variable so that you can reference that variable from both places.

Just always show the loading image when making the request, and on success remove it.

Thanks pmw57

yes I understand how it should work, just don’t know how to code it :slight_smile:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
else (images/loading.gif)

???

Thanks Barry

The else clause is a mistake. That part is no good for you.

In the if statement, you would remove the loading image.
After the send part, you would add the loading image.


xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        // remove loading image here
    }
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
// add loading image here

Are you saying to add images/loading.gif at the end of the code?

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        
    }
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
images/loading.gif

Thanks

I’m saying that when you send the AJAX request, that you should always show the loading image at that stage.

Then later on when the data has been successfully received (in the if statement) that you should then remove (or replace) the loading image from there.

Ok Paul thanks for your help.

Hi Paul, Ive been trying to find an example of how this should be put together, no such luck (:

Would it be possible to show me in the code how all this should fit together?
Still learning js thanks.

Barry

Something like this could be all that you need:


document.getElementById("txtHint").innerHTML='<img src="images/loading.gif">';

The txtHint area (and the loading image) then gets automatically replaced when the successful info comes through.

Don’t forget that the above should be placed outside of the if statement. It should be placed near where you send the ajax request.

Thanks a lot Paul.
I’ll have a play around with the code and let you know how i get on cheers.

Barry

:slight_smile: Seems to be working.
Bit more of a delay now that I’ve added the image, but might be the wireless.
How does the code look to you?
Should we be repeating document.getElementById(“txtHint”) ?

xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    document.getElementById("txtHint").innerHTML='<img src="images/loading.gif">';
    }

Thanks again.

It was the wireless, everything back to normal now cheers might keep the preload image in mind, works quite well with text (loading…) :slight_smile:

Thanks for the explanation about txtHint might be best to keep what we’ve got for now than create another function, I’m sure this will all fit together as I learn more.

Also just come across the console in firebug, getting some useful information back :cool:

That’s me for the night and thanks again Paul, hopefully chat soon with some other coding issues.

You may have to put a test web page up on the internet, so that we can see what is currently being done, and in the context of that work out how to achieve what you’re wanting to do.

Cheers Paul
I’ll have to try and get something uploaded tomorrow bit late now and everything is running locally.

Thanks again, Barry.