Solved

How to apply an AJAX Loading Status

Posted on 2010-08-28
4
465 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 63 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 62 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

Suggested Solutions

Title # Comments Views Activity
center navbar (navigation menu) on web page 3 68
Boolean 13 51
Javascript reference in ExcelWebAddIn Project 2 33
Pass a js value to an html form 5 43
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

752 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