Delay AJAX request

DarkRanger · Post by **DarkRanger** » 12 Apr 2010, 10:56

Hi,

I would like to know how to delay an ajax request so I can see where the loading image displays. Thing is, with localhost, there is no delay in getting the information. There is no download time, so the loading image does not show at all.

Is there a way I can make it show? Here is my onstatechange function that is called when the ajax state changes.

Code: Select all

function stateChanged()
{
	if (xmlhttp.readyState==1){}
	if (xmlhttp.readyState==2)
	{
		document.getElementById("loading").style.display = "";
		document.getElementById("contents").style.display = "none";
	}
	if (xmlhttp.readyState==3)
	{
		document.getElementById("loading").style.display = "";
		document.getElementById("contents").style.display = "none";
	}
	if (xmlhttp.readyState==4)
	{
		document.getElementById("loading").style.display = "none";
		document.getElementById("contents").style.display = "";
		document.getElementById("contents").innerHTML=xmlhttp.responseText;
	}
}

endev8003 · Post by **endev8003** » 19 Apr 2010, 11:20

You can set a delay on the line which you call the function from, like the control event.

The js command is setTimeout and has two parameters, the first is the js function to run, and the second is the time to wait in milliseconds
e.g. <body onLoad="setTimeout('delayer()', 5000)">

Here is page with more info: http://www.tizag.com/javascriptT/javascriptredirect.php

To get it to work for you is going to be a bit more difficult, since you want your delays inside the function.
You can try to put the code itself in the first parameter, or change your code to work with function calls for each state.

Something like this, perhaps. I haven't tested it, since I don't have the full ajax code available.

Code: Select all

function stateFour()
{
      document.getElementById("loading").style.display = "none";
      document.getElementById("contents").style.display = "";
      document.getElementById("contents").innerHTML=xmlhttp.responseText;
}

function stateChanged()
{
   if (xmlhttp.readyState==1){}
   if (xmlhttp.readyState==2)
   {
      document.getElementById("loading").style.display = "";
      document.getElementById("contents").style.display = "none";
   }
   if (xmlhttp.readyState==3)
   {
      document.getElementById("loading").style.display = "";
      document.getElementById("contents").style.display = "none";
   }
   if (xmlhttp.readyState==4)
   {
      setTimeout('stateFour', 5000);
   }
}

It looks like you're writing your own ajax code. I use SimpleJS to do all of the ajax calls and just have an aspx page that writes the html to response.
With it there is an option to make the div area flash, making it easier to spot.

DarkRanger · Post by **DarkRanger** » 30 Apr 2010, 11:29

cool. thanks that helped!

PCFormat Forum Archive

Delay AJAX request

Delay AJAX request

Re: Delay AJAX request

Re: Delay AJAX request