Each AJAX applications interact between server and client browser on small parts of data. Even this data is small, user have to be informed about progress of operation. For example, if no progress bar or some animation are displayed while AJAX application working, user will be not be informed whats happening.
For this, when you start interaction with the server it is good to inform the user, that the operation started and when work is finished, to stop the progress bar and this makes user to feel, that the job is done.
For our example we will use already prepared AJAX application of MySQL PHP AJAX Query and will add some Google-like progress bar.
Like you see, in application below, when you select an employ from the drop down list, now will appear small awaiting icon until the result is displayed:
Google-like AJAX Progress Bar
|
In our AJAX application we will use some AJAX suitable animated GIF file for displaying "work in progress".
First, we have to set this gif file on suitable place around the <select> drop down, and to set him to be invisible. For this purpose we will use css style="display: none;" property on the exact image and will assign some id="tut_wait" for easy manipulating DOM object.
Next, in the beginning of our AJAX function we have to set
document.getElementById('tut_wait').style.display='none';
AJAX Progress Bar image not to be 'none', actually to be visible.
When AJAX function get done and data is received, our progress bar have to hide. This happens by setting properties of progress bar id:
document.getElementById('tut_wait').style.display='none';
First, we have to set this gif file on suitable place around the <select> drop down, and to set him to be invisible. For this purpose we will use css style="display: none;" property on the exact image and will assign some id="tut_wait" for easy manipulating DOM object.
Next, in the beginning of our AJAX function we have to set
document.getElementById('tut_wait').style.display='none';
AJAX Progress Bar image not to be 'none', actually to be visible.
When AJAX function get done and data is received, our progress bar have to hide. This happens by setting properties of progress bar id:
document.getElementById('tut_wait').style.display='none';
<html>
<head>
<script language="JavaScript" type="text/javascript">
function display_data(id) {
document.getElementById('tut_wait').style.display='';
document.getElementById('employ_data').innerHTML='';
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
var date = new Date();
var timestamp = date.getTime();
var url="ajax.php";
url=url+"?employ_id="+id;
url=url+'&time='+timestamp;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
document.getElementById('employ_data').innerHTML=xmlhttp.responseText;
document.getElementById('tut_wait').style.display='none';
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<select onchange="display_data(this.value);">
<option>Select employ</option>
<?php
mysql_connect('localhost','user','pass');
mysql_select_db('employ');
$query="select id, name from employ order by name asc";
$result=mysql_query($query);
while(list($id, $name)=mysql_fetch_row($result)) {
echo "<option value=\"".$id."\">".$name."</option>";
}
?>
</select><br/>
<img src="/img/loading.gif" width="100" height="100" style="display: none; margin-top: 20px;" id="tut_wait"/>
<div id="employ_data"></div>
</body>
</html>
In this example, server-side AJAX code (ajax.php) is the same like in the original version without AJAX progress bar. You can also get this file from here:
<?php
if (is_numeric($_GET['employ_id'])) {
mysql_connect('localhost','user','pass');
mysql_select_db('employ');
$query="select * from employ where id=$_GET[employ_id]";
$result=mysql_query($query);
$employ=mysql_fetch_array($result);
echo "<table border=\"1\">
<tr>
<td>Name:</td>
<td>".$employ[name]."</td>
</tr>
<tr>
<td>Appoint Date:</td>
<td>".$employ[appoint_date]."</td>
</tr>
<tr>
<td>Country:</td>
<td>".$employ[country]."</td>
</tr>
<tr>
<td>City:</td>
<td>".$employ[city]."</td>
</tr>
<tr>
<td>E-mail:</td>
<td>".$employ[email]."</td>
</tr>
<tr>
<td>Phone:</td>
<td>".$employ[phone]."</td>
</tr>
</table>";
}
?>
If you not fully understand all of this AJAX Progress Bar Tutorial you can start with our AJAX Basics tutorial or to look our AJAX Tutorials section.
Next Tutorials
Post Comment
Need a specific tutorial? Do not hesitate and submit a request!
