Any easier way to put an Ajax Preloader?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Any easier way to put an Ajax Preloader?

Post 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?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

What's an AJAX preloader?
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Oh... I'm sorry. I should've elaborated... It is the small icon that shows up before loading any Ajax Content...
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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.
User avatar
louie35
Forum Contributor
Posts: 144
Joined: Fri Jan 26, 2007 8:40 am
Location: Dublin
Contact:

Post by louie35 »

before returning the text you add:

Code: Select all

document.getElementById("div_id").innerHTML="<img src=images/loading.gif' /> <b>loading..</b>";
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Oh boy... :roll: Sorry... I request a mod to please move this question...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post 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...
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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>
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post 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...
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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...
:?:
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Ok ok... I understood :) Thank you...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post 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?
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post 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); 
Phoenixheart
Forum Contributor
Posts: 123
Joined: Tue Nov 16, 2004 7:46 am
Contact:

Post 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.
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post 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...
Post Reply