Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to apply an AJAX Loading Status

Posted on 2010-08-28
4
Medium Priority
?
475 Views
Last Modified: 2012-05-10
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
Comment
Question by:swaggerking
  • 2
4 Comments
 
LVL 10

Expert Comment

by:Jini Jose
ID: 33552013
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
 
LVL 10

Accepted Solution

by:
Jini Jose earned 252 total points
ID: 33552018
you can do it like this

document.getElementById(oreDiv).innerHTML="<img id=loadingimg src=loading1.gif> Loading... Please wait..";
0
 

Assisted Solution

by:avniy
avniy earned 248 total points
ID: 33552167
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
 

Author Closing Comment

by:swaggerking
ID: 33554001
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question