Link to home
Start Free TrialLog in
Avatar of brettr
brettr

asked on

Loading image for async call

I'm using an XMLHttpRequest call and want to display a loading or similar animation image while waiting.  Here's the psuedo code I'm using:

xReq = new XMLHttpRequest()
xReq.open(...)
xReq.onreadystatechange = function(){..poll state..}
text = xReq.responseText

Is there a pattern for displaying the image?  Any code examples?
Avatar of MacAnthony
MacAnthony
Flag of United States of America image

I don't know of examples using just the core implementation of javascript, but there I have seen several toolkits and js frameworks that make this implementation pretty easy. The one I've been looking at the most was Ext JS. It also has the benefit of having an AJAX module built in as well so you don't have to use the XMLHttpRequest function. Right now, this function is pretty browser specific (certain versions of IE if not all versions don't support this function) and it's easier to let a library deal with all that.

An example of it with code can be found:
http://extjs.com/deploy/dev/examples/form/xml-form.html
ASKER CERTIFIED SOLUTION
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brettr
brettr

ASKER

How do I get the div to appear basically in the middle of the page on top of everything else?  Is there a way to gray out the stuff behind this div?
try something like this to show the div on center of page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#outerdiv {position:absolute;top:50%;left:50%;overflow:show;}
#innerdiv {position:absolute;top:-(50% of your height);left:-(50% of your width);}

</style>
</head>

<body>

<div id="outerdiv">
<div id="innerdiv">
<p>Hello world</p>
</div>
</div>
</body>
</html>