Any easier way to put an Ajax Preloader?
Moderator: General Moderators
Any easier way to put an Ajax Preloader?
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?
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
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.
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?louie35 wrote:before returning the text you add:Code: Select all
document.getElementById("div_id").innerHTML="<img src=images/loading.gif' /> <b>loading..</b>";
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...
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:
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>I don't seem to be able to test it... I'm using the following:
order.html
ajax-example1.php
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?
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>
Code: Select all
<?php
$name = $_GET['name'];
sleep(10);
echo $name;
?>Blame it on my partial knowledge.. hehe Got it... THanks a lot for the help...
btw, it worked with the following modification:
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:
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
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.
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.