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:

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 is get started. If all you care about is the end result. Here how to include it in your page:
view plaincopy to clipboardprint?

   1. <script type="text/javascript" src="prototype.js"></script> 
   2. <script type="text/javascript" src="ajaxStatusDisplay.js"></script>
That is it! Now whenever you make an Ajax request with Prototype, you will see a message popup with the text "Loading...".

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:
view plaincopy to clipboardprint?

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

<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:
view plaincopy to clipboardprint?

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

<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:
 
view plaincopy to clipboardprint?

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

<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:
view plaincopy to clipboardprint?

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

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

 View Full Story.