How to create AJAX Notifications with jQuery

If you're using Ajax, you should give hints to the user when a request to the server is being made, and you should tell him if something goes wrong. Gmail does this really well. Here's how I coded it:

First, add this to your layout:

<div id="ajaxNotifications"></div>

#ajaxNotifications {
 position: fixed;
 top: 0px;
 right: 0px;
 background: yellow;
 text-color: black;
 padding: 5px;
 display: none;
}

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
 <% extras = RAILS_ENV == "development" ? "{ uncompressed: true }" : "{}" %>
 google.load("jquery", "1.3.2", <%= extras %>);
 google.load("jqueryui", "1.7.2", <%= extras %>);
</script>
<%= javascript_include_tag "application" %>

// This is the main application object.  It follows the module pattern.
var application = function () {
 // Private functions and data go here.

 return {
   // Public functions and data go here.
   HTTP_CONFLICT: 409,

   // Show the user a quick little message.
   showAjaxNotification: function(text) {
     $("#ajaxNotifications").text(text).show();
   },

   // Hide the message.  If possible, use hideAjaxNotificationIfMatches
   // instead.
   hideAjaxNotification: function() {
     $("#ajaxNotifications").hide().text("");
   },

   // Hide the message, but only if it matches the given text.
   hideAjaxNotificationIfMatches: function(text) {
     if ($("#ajaxNotifications").text() == text) {
       application.hideAjaxNotification();
     }
   }
 };
}();

$(document).ready(function() {
 var loadingMessage = "Loading...";

 // When an Ajax request is being made, tell the user "Loading...".
 $(this).ajaxStart(function() {
   application.showAjaxNotification(loadingMessage);
 });

 // Only if it completes normally do we hide the message.
 $(this).ajaxSuccess(function() {
   application.hideAjaxNotificationIfMatches(loadingMessage);
 });

 // Otherwise, we give the user an error message.
 $(this).ajaxError(function(event, xhr, ajaxOptions, thrownError) {

   // If we get an HTTP_CONFLICT, it means our data is stale.  Reload the
   // page.  To test this functionality, use two tabs in your browser.
   if (xhr.status == application.HTTP_CONFLICT) {
     location.reload();
   }

   // Otherwise, just tell the user something went wrong.
   else {
     application.showAjaxNotification("Request failed: could not contact server");
   }
 });
});