Any easier way to put an Ajax Preloader?
Posted: Mon Jul 16, 2007 3:12 am
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?
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
Client Side
HTML, CSS, JavaScript, and anything else that deals with client side capabilities.
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>";
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>Didn't say you should. It's only an already existing, working example.legend986 wrote:Thank you volka... I presume I need not download the lightbox script for this.
legend986 wrote:It contains only the builtin js functions i guess...
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;
?>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);