I was born in Bulgaria. My immediate family and I relocated to Syracuse, NY in 1995. I completed high school in Syracuse, and then continued my education at Alfred University. My major at Alfred University was Computer Science. I also obtained a minor in Management Information Systems (MIS) to bridge the gap between technology and the business world. One of my future goals is to extend that bridge by obtaining a Master's degree in Business Administration. Boyan is a DZone MVB and is not an employee of DZone and has posted 27 posts at DZone. You can read more from them at their website. View Full User Profile

Creating a Gmail Like Ajax Status Display

02.29.2008
| 21653 views |
  • submit to reddit

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:

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

References
Published at DZone with permission of Boyan Kostadinov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

David Walsh replied on Fri, 2008/02/29 - 4:48pm

Great job Boyan!  Now I just need to port it to MooTools...

Boyan Kostadinov replied on Mon, 2008/03/03 - 12:28pm in response to: David Walsh

@David, thanks! That could be arranged. I need to learn some mooTools anyway. Also, I got a small update that doesn't require any changes to the JavaScript source if you want to use custom CSS.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.