• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

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?
0
brettr
Asked:
brettr
  • 3
1 Solution
 
MacAnthonyCommented:
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
0
 
Kiran Paul VJComputer EngineerCommented:
try this

//your code
xReq = new XMLHttpRequest()
xReq.open(...)
xReq.onreadystatechange = RequestHandler;

function RequestHandler()
{
      if (xReq.readyState == 4 && xReq.status == 200)
       {
            text = xReq.responseText;            
      }
        else
        {
                 document.getElementById('show_image').innerHTML = '<img src="loading.jpg" />';
        }
}


and in your
<body>
<div id="show_image"></div>
</body>


or

you can do like this

xReq = new XMLHttpRequest()
xReq.open(...)
xReq.onreadystatechange = function () {
      if (xReq.readyState == 4 && xReq.status == 200)
       {
            text = xReq.responseText;            
      }
        else
        {
                 document.getElementById('show_image').innerHTML = '<img src="loading.jpg" />';
        }
}
0
 
brettrAuthor Commented:
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?
0
 
Kiran Paul VJComputer EngineerCommented:
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>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now