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

How to apply an AJAX Loading Status

I'm new to AJAX and I'm trying figure out how to implement/apply a loading.gif into the following script.

<script>
function loadCommentDoc()
{
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("moreDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax/commentsmore.asp",true);
xmlhttp.send();
}
</script>
0
swaggerking
Asked:
swaggerking
  • 2
2 Solutions
 
Jini JoseSenior .Net DeveloperCommented:
first on design time add the innerHtml of moreDiv, as the loading gif. then if the httprequest is ok then it will automatically replace the content
0
 
Jini JoseSenior .Net DeveloperCommented:
you can do it like this

document.getElementById(oreDiv).innerHTML="<img id=loadingimg src=loading1.gif> Loading... Please wait..";
0
 
avniyCommented:
I'm new to AJAX and I'm trying figure out how to implement/apply a loading.gif into the following script.
You have 2 options:
1. document.getElementById(YOURDIVHERE).innerHTML="<img id=loadingimg src=loading1.gif> Loading... Please wait..";
and then run the xmlhttp script,

OR just put this loading gif inside your xmlhttp script like this:

<script>
function loadCommentDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
document.getElementById(YOURDIVHERE).innerHTML="<img id=loadingimg src=loading1.gif> Loading... Please wait..";
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("moreDiv").innerHTML=xmlhttp.responseText;
    }
  }


good luck!
0
 
swaggerkingAuthor Commented:
Thanks. it took me a bit of time to understand/work through  on my end but I got it work.

function loadCommentDoc()
{
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("moreDiv").innerHTML=xmlhttp.responseText;
    }

else {
document.getElementById("moreDiv").innerHTML=' Loading Content...';
}
}
xmlhttp.open("GET","ajax/commentsmore.asp",true);
xmlhttp.send();
}
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: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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