Tuesday, August 25, 2009

JavaScript: 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>
Add some CSS to make it purty:
#ajaxNotifications {
position: fixed;
top: 0px;
right: 0px;
background: yellow;
text-color: black;
padding: 5px;
display: none;
Setup jQuery, jQuery UI, and your own application.js file. This syntax is for Rails, but it's similar in Python:
<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 %>);
<%= javascript_include_tag "application" %>
Finally, here's application.js to pull it all together:
// 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.

// Show the user a quick little message.
showAjaxNotification: function(text) {

// Hide the message. If possible, use hideAjaxNotificationIfMatches
// instead.
hideAjaxNotification: function() {

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

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

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

// Only if it completes normally do we hide the message.
$(this).ajaxSuccess(function() {

// 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) {

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


JavaScriptBank.com said...

simple code&tip but I think very useful, thks for sharing

Can I share this snippet on my JavaScript library?

Awaiting your response. Thank

Shannon -jj Behrens said...

Sure, as long as you provide a link back to this post ;)

Chris said...

Thanks, I was looking for a good jquery notifier for ajax calls. Something like you see on shopify or wufoo. well done!

Shannon -jj Behrens said...

Cool, glad I could be of service :)