Creating a Gmail Like Ajax Status Display

Most of us geeks know and love Gmail. It has a very nice interface and it is an inspiration to constantly improve our own web applications. Today, I set out to create an unobtrusive Gmail like page status message, much like the one shown in the screen shot:

[img_assist|nid=1488|title=|desc=|link=none|align=undefined|width=501|height=79]

My requirements were simple:

1. Should look like the one used in Gmail
2. Should be able to just include the source JavaScript file without any further configuration
3. Should allow the user to specify a custom status message to be displayed
4. Should allow for the use of custom styles but none are required
5. Integrates with Prototype.js Ajax requests

The only prerequisite is Prototype.js v1.6

Let's get started. If all you care about is the end result. Here how to include it in your page:

<!-- Include the Prototype library -->
<script type="text/javascript" src="prototype.js" src="prototype.js">
</script>

<!-- Include the ajax status display script -->
<script type="text/javascript" src="ajaxStatusDisplay.js" src="ajaxStatusDisplay.js">
</script>

That's it! Now whenever you make an Ajax request with Prototype, you will see a message popup with the text "Loading...". You can check out the end results at http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Simple.html

Now to the advanced features.

As stated #3 and #4 above, two of our requirements are to allow the user to specify a custom status message and custom CSS styles for the displayed message. Satisfying the first one of those requirements is done by having the user create an element on the page with the custom message like so:

<div id="ajaxStatusDisplay_userMessage">
Loading...Wait a Minute!
</div>

This element does not have to be a div. It could be a any text container such as span or even input (text or hidden). What is important is the id of the element, it has to be set to "ajaxStatusDisplay_userMessage" for the custom message to be picked up.

The next requirement works much in the same way. Custom styles can be specified by creating two CSS classes with certain names: "ajaxStatusDisplay_userStyle" and "ajaxStatusDisplay_userMessageStyle". Here an example that will produce the default look:

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:45%;top:2px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background:#FFF1A8 none repeat scroll 0%;color:#000;padding: 0pt 5px;
	font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight: bold;
	text-align:center;width:100%
}
</style>

And here is another example that will produce a white text on black background in the top right corner:
 

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:94%;top:0px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background-color:#000;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	padding:2px;
	width:100%;
}
</style>

To use the your own CSS styles, you do not need to do anything but define them as shown above (as compared to the initial version where you needed to edit the file "ajaxStatusDisplay.js" and set the "useUserCssStyles" variable to "true").

A small extra feature is the ability to change the status message at runtime. This is done by using (you guessed it), the "setStatusMessage" function as follows:

// Set the status message based on the value in the "userMessage" input field
ajaxStatusDisplay.setStatusMessage($F('userMessage'));

To see setting the status message in action along with using a custom CSS style, check out http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Advanced.html

You can view all the sources at:

JavaScript Source: ajaxStatusDisplay.txt
Simple Example Source: ajaxStatusDisplay-Simple.txt
Advanced Example Source: ajaxStatusDisplay-Advanced.txt

You can download the JavaScript source at:

http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay.js