Page 1 of 2

Any easier way to put an Ajax Preloader?

Posted: Mon Jul 16, 2007 3:12 am
by legend986
I've just started Ajax. I was wondering if there's an easy and a simple way to construct an Ajax preloader for my code... Can someone please advice me upon this?

Posted: Mon Jul 16, 2007 3:21 am
by volka
What's an AJAX preloader?

Posted: Mon Jul 16, 2007 3:22 am
by legend986
Oh... I'm sorry. I should've elaborated... It is the small icon that shows up before loading any Ajax Content...

Posted: Mon Jul 16, 2007 3:26 am
by volka
Like the rotating ...thingeling when you click on an image at http://www.huddletogether.com/projects/lightbox2/ ?



If yes this question is completely unrelated to php and should be moved to
Client Side
HTML, CSS, JavaScript, and anything else that deals with client side capabilities.

Posted: Mon Jul 16, 2007 3:27 am
by louie35
before returning the text you add:

Code: Select all

document.getElementById("div_id").innerHTML="<img src=images/loading.gif' /> <b>loading..</b>";

Posted: Mon Jul 16, 2007 3:28 am
by legend986
Oh boy... :roll: Sorry... I request a mod to please move this question...

Posted: Mon Jul 16, 2007 3:31 am
by legend986
louie35 wrote:before returning the text you add:

Code: Select all

document.getElementById("div_id").innerHTML="<img src=images/loading.gif' /> <b>loading..</b>";
Oh... is that it? 8O My god!! Never knew that... I was searching in so many sites and I got so complex answers that I thought there's no easier way to do it... I'll try that out... Thank you so much...

By the way, will this image show up before loading the actual content? I mean, will it show up like a Flash Preloader that when the content is being fetched, it will show loading and when the content has been shown, it'll display the actual content...

Posted: Mon Jul 16, 2007 3:45 am
by volka
Can be as simple or complex as you like ;)
e.g. the lightbox script inserts a <div> element when it's initialized and switches the display property between none and block.

simplified:

Code: Select all

<html>
	<head><title>...</title></head>
	<body>
		<button onclick="document.getElementById('loading').style.display = (document.getElementById('loading').style.display.toUpperCase() == 'NONE') ? 'block':'none'">click</button>
		<div id="loading" style="display:none">loading</div>
	</body>
</html>

Posted: Mon Jul 16, 2007 3:54 am
by legend986
Thank you volka... I presume I need not download the lightbox script for this. It contains only the builtin js functions i guess...

Posted: Mon Jul 16, 2007 3:58 am
by volka
legend986 wrote:Thank you volka... I presume I need not download the lightbox script for this.
Didn't say you should. It's only an already existing, working example.
legend986 wrote:It contains only the builtin js functions i guess...
:?:

Posted: Mon Jul 16, 2007 4:04 am
by legend986
Ok ok... I understood :) Thank you...

Posted: Mon Jul 16, 2007 5:05 am
by legend986
I don't seem to be able to test it... I'm using the following:

order.html

Code: Select all

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML ="<img src=loading.gif' /> <b>loading..</b>"; 
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var queryString = "?name=" + name;
	ajaxRequest.open("GET", "ajax-example1.php" + queryString, true);
	ajaxRequest.send(null); 
}

//-->
</script>



<form name='myForm'>
Enter Name: <input type='text' id='name' /><br />

<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>
ajax-example1.php

Code: Select all

<?php

$name = $_GET['name'];
sleep(10);
echo $name;

?>
I used the sleep timer to just test if the image shows up because I'm using localhost to test my script and the image won't show up because there isn't much processing involved... Am I doing something wrong or will it work when I upload it to an FTP?

Posted: Mon Jul 16, 2007 6:07 am
by legend986
Blame it on my partial knowledge.. hehe Got it... THanks a lot for the help...

btw, it worked with the following modification:

Code: Select all

	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var ajaxDisplay = document.getElementById('ajaxDiv');
	ajaxDisplay.innerHTML ="<img src='loading.gif' /> <b>loading..</b>"; 
	var name = document.getElementById('name').value;
	var queryString = "?name=" + name;
	ajaxRequest.open("GET", "ajax-example1.php" + queryString, true);
	ajaxRequest.send(null); 

Posted: Wed Jul 18, 2007 11:42 pm
by Phoenixheart
I know it's a good practice to code an Ajax yourself, but believe me... sooner or later you'll get some errors that you don't have any idea where they come from :D It's because of those IE, FF, Safari, Opera, each handles client Javascript in a different way.
So I'd recommend trying some very good open source Ajax libs out there. Prototype, Dojo, Script.ta.something, jQuery, Google, Yahoo to name a few.

Posted: Thu Jul 19, 2007 10:33 am
by legend986
Yeah, I've long heard of Prototype library... I'm longing to try it out... Just waiting for some new ideas to pop out of my mind... :) Thanks a lot for the suggestion...