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

Add DIV or Image Overlay while Loading AJAX

I have an AJAX loader that I would like to add some sort of overlaying DIV, maybe blackout the rest of the screen, or just put an image in the middle of the screen (or any combination of the aforementioned) while the AJAX content is loading.  Can anyone tell me how to alter my current script to do this?
function dropdown(ID) {
		if(ID.length==0) {
			document.getElementById("subBody").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("subBody").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-dropdown.php?id=" + ID,true);
		xmlhttp.send();
	}

Open in new window

0
EMB01
Asked:
EMB01
  • 9
  • 9
1 Solution
 
EyalCommented:
0
 
leakim971PluritechnicianCommented:
put this in your page body :
<img id="pw" src="http://images3.wikia.nocookie.net/__cb20071114151323/nonciclopedia/images/3/39/Please_wait.gif" style="position:absolute;left:128px;top:128px;display:none" />

your code updated :
function dropdown(ID) {
		if(ID.length==0) {
			document.getElementById("subBody").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
document.getElementById("pw").style.display = "none";
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("subBody").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-dropdown.php?id=" + ID,true);
document.getElementById("pw").style.display = "block";
		xmlhttp.send();
	}

Open in new window

0
 
EMB01Author Commented:
Thanks, leakim, but it doesn't seem to work.  It stalls before loading the content, but not image is overlayed.
0
Industry Leaders: 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!

 
leakim971PluritechnicianCommented:
Ok, we set the z-index : http://www.w3schools.com/cssref/pr_pos_z-index.asp

<img id="pw" src="http://images3.wikia.nocookie.net/__cb20071114151323/nonciclopedia/images/3/39/Please_wait.gif" style="position:absolute;left:128px;top:128px;display:none;z-index:10" />
0
 
EMB01Author Commented:
Sorry, it's still not appearing.  Thanks for your effort so far, though.
0
 
leakim971PluritechnicianCommented:
increase the z-index

Do you've a link to your page?
0
 
EMB01Author Commented:
http://tinyurl.com/5sxn8xn

You can click "blowers" and then click a dropdown menu which fires the "dropdown" javascript function which should display the image overlay while loading content.  Currently, the AJAX just loads without displaying the image...
0
 
leakim971PluritechnicianCommented:
credentials required
0
 
EMB01Author Commented:
Oh, really?  I'm sorry I didn't realize.  I guess I can't show you...  Sadly.  Can you help without it?  Here's my body code.
<body>
	<div class="container">
		<div class="header">
			<div class="button">
			<a href="index.php">Back to Map</a>
			</div>
			<div class="text">
			Text
			</div>
			<div class="tabs">
				<ul>
					<li><a href="#" onclick="tab('1&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Blowers Sales</a></li>
					<li><a href="#" onclick="tab('2&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Regenerative Blowers Sales</a></li>
					<li><a href="#" onclick="tab('3&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Motors Sales</a></li>
				</ul>
			</div>
		</div>
		<img id="pw" src="http://images3.wikia.nocookie.net/__cb20071114151323/nonciclopedia/images/3/39/Please_wait.gif" style="position:absolute;left:128px;top:128px;display:none;z-index:10" />
		<div class="body" id="body">
		</div>
	</div>
</body>

Open in new window

0
 
EMB01Author Commented:
I meant to show you the whole code.
<!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>
	<title>AMETEK Contact Map</title>
	<meta name="Description" content="AMETEK Contact Map" />
	<meta name="Keywords" content="AMETEK Contact Map" />
	<meta equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="all" href="pullRep.css" />
	<script language="javascript" type="text/javascript">
	function tab(ID) {
		if(ID.length==0) {
			document.getElementById("body").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("body").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-tabs.php?id=" + ID,true);
		xmlhttp.send();
	}
	function dropdown(ID) {
		if(ID.length==0) {
			document.getElementById("subBody").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
document.getElementById("pw").style.display = "none";
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("subBody").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-dropdown.php?id=" + ID,true);
document.getElementById("pw").style.display = "block";
		xmlhttp.send();
	}
	</script>
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="button">
			<a href="index.php">Back to Map</a>
			</div>
			<div class="text">
			Text
			</div>
			<div class="tabs">
				<ul>
					<li><a href="#" onclick="tab('1&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Blowers Sales</a></li>
					<li><a href="#" onclick="tab('2&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Regenerative Blowers Sales</a></li>
					<li><a href="#" onclick="tab('3&continent=<?php echo $_GET['continent'].'&territory='.$_GET['territory']; ?>')">Motors Sales</a></li>
				</ul>
			</div>
		</div>
		<img id="pw" src="http://images3.wikia.nocookie.net/__cb20071114151323/nonciclopedia/images/3/39/Please_wait.gif" style="position:absolute;left:128px;top:128px;display:none;z-index:10" />
		<div class="body" id="body">
		</div>
	</div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
please right click on the page in your browser, choose view source and post it here
because I can run PHP
0
 
leakim971PluritechnicianCommented:
because I can't run PHP
0
 
EMB01Author Commented:
The page source is the same code.
<!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>
	<title>AMETEK Contact Map</title>
	<meta name="Description" content="AMETEK Contact Map" />
	<meta name="Keywords" content="AMETEK Contact Map" />
	<meta equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="all" href="pullRep.css" />
	<script language="javascript" type="text/javascript">
	function tab(ID) {
		if(ID.length==0) {
			document.getElementById("body").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("body").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-tabs.php?id=" + ID,true);
		xmlhttp.send();
	}
	function dropdown(ID) {
		if(ID.length==0) {
			document.getElementById("subBody").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
document.getElementById("pw").style.display = "none";
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("subBody").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-dropdown.php?id=" + ID,true);
document.getElementById("pw").style.display = "block";
		xmlhttp.send();
	}
	</script>

</head>
<body>
	<div class="container">
		<div class="header">
			<div class="button">
			<a href="index.php">Back to Map</a>
			</div>
			<div class="text">
			Text
			</div>

			<div class="tabs">
				<ul>
					<li><a href="#" onclick="tab('1&continent=North America&territory=Ohio')">Blowers Sales</a></li>
					<li><a href="#" onclick="tab('2&continent=North America&territory=Ohio')">Regenerative Blowers Sales</a></li>
					<li><a href="#" onclick="tab('3&continent=North America&territory=Ohio')">Motors Sales</a></li>
				</ul>
			</div>

		</div>
		<img id="pw" src="http://images3.wikia.nocookie.net/__cb20071114151323/nonciclopedia/images/3/39/Please_wait.gif" style="position:absolute;left:128px;top:128px;display:none;z-index:10" />
		<div class="body" id="body">
		</div>
	</div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
initialy you post the wrong ajax function :
you've two. add the code to both of course...

test page : http://jsfiddle.net/bXcrd/
	function tab(ID) {
		if(ID.length==0) {
			document.getElementById("body").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("pw").style.display = "none";
				document.getElementById("body").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-tabs.php?id=" + ID,true);
document.getElementById("pw").style.display = "block";
		xmlhttp.send();
	}
	function dropdown(ID) {
		if(ID.length==0) {
			document.getElementById("subBody").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("Your browser doesn't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
document.getElementById("pw").style.display = "none";
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("subBody").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","ajax-dropdown.php?id=" + ID,true);
document.getElementById("pw").style.display = "block";
		xmlhttp.send();
	}

Open in new window

0
 
EMB01Author Commented:
Thanks, and sorry about that.  But, it still stalls (loads) but shows no image whilst doing so.
0
 
leakim971PluritechnicianCommented:
So your ajax fail.
Fix it first
0
 
EMB01Author Commented:
No, sorry I believe you misunderstood.  The ajax eventually loads but it doesn't show the image during the time in between the call to load and when it finally displays the loaded content.
0
 
leakim971PluritechnicianCommented:
Did you my test page?
If you give me the credentials, I can check why it don't work on your side
0
 
EMB01Author Commented:
Sadly, I couldn't get it to work.  But, the code the expert provided clearly worked well on its own, so I will award the points.  Thanks, leakim!  You really know JS well.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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