[SOLVED] Loading Image?

[wwfc_barmy_army]

Hello, I have this code which i found on the internet and modified to my needs:

 

var xmlHttp

function showResult(str)
{
if (str.length==0)
{ 
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 

var url="blockfind.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 

   
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
} 


}



}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

 

Works fine. But i'm trying to add a loading image. I've tried adding;

 

 if (xmlHttp.readyState == 1) {
	   document.getElementById('livesearch').innerHTML = "<p align='center'><img src='ajax-loader.gif'><br /> Please Wait. This process may take a minute.</p>";
   }

 

Into the function stateChanged() but it doesn't do anything.

 

any ideas, suggestions or code?

 

Thanks.

[JasonLewis]

Just set the loading image as soon as the function is called, don't worry about an if() statement for it. You could even set it up where you do the open and send, before the stateChanged() function.

[wwfc_barmy_army]

Whereever i seem to put it, it doesn't seem to work. It just wont show anything till the ajax result comes back. Can't see where i'm going wrong :S any ideas?

[JasonLewis]

Try this revised code:

 

var xmlHttp = "";

function showResult(str){
if(str.length==0){
	document.getElementById("livesearch").innerHTML = "";
	document.getElementById("livesearch").style.border = "0px";
	return;
}

xmlHttp = GetXmlHttpObject()'

if(xmlHttp==null){
	alert("Browser does not support HTTP Request");
	return;
}

//Set the loading image.
document.getElementById('livesearch').innerHTML = "<p align='center'><img src='ajax-loader.gif'><br /> Please Wait. This process may take a minute.</p>";

//Call file with ajax.
var url = "blockfind.php?q="+str+"&sid="+Math.random();
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

//Ready state change.
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
		document.getElementById("livesearch").innerHTML = xmlHttp.responseText;
		document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
	}
}
}

function GetXmlHttpObject(){
var xmlHttp = null;
try {
	// Firefox, Opera 8.0+, Safari
	xmlHttp = new XMLHttpRequest();
} catch (e) {
	// Internet Explorer
	try {
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}
return xmlHttp;
}

[wwfc_barmy_army]

Super! works great! Thanks ProjectFear!