Solved

How to apply an AJAX Loading Status

Posted on 2010-08-28
4
435 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
Comment Utility
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 63 total points
Comment Utility
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 62 total points
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now