Skip to main content

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 %>);
</script>
<%= 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.
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");
}
});
});

Comments

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

Can I share this snippet on my JavaScript library?


Awaiting your response. Thank
jjinux said…
Sure, as long as you provide a link back to this post ;)
Unknown said…
Thanks, I was looking for a good jquery notifier for ajax calls. Something like you see on shopify or wufoo. well done!
jjinux said…
Cool, glad I could be of service :)

Popular posts from this blog

Ubuntu 20.04 on a 2015 15" MacBook Pro

I decided to give Ubuntu 20.04 a try on my 2015 15" MacBook Pro. I didn't actually install it; I just live booted from a USB thumb drive which was enough to try out everything I wanted. In summary, it's not perfect, and issues with my camera would prevent me from switching, but given the right hardware, I think it's a really viable option. The first thing I wanted to try was what would happen if I plugged in a non-HiDPI screen given that my laptop has a HiDPI screen. Without sub-pixel scaling, whatever scale rate I picked for one screen would apply to the other. However, once I turned on sub-pixel scaling, I was able to pick different scale rates for the internal and external displays. That looked ok. I tried plugging in and unplugging multiple times, and it didn't crash. I doubt it'd work with my Thunderbolt display at work, but it worked fine for my HDMI displays at home. I even plugged it into my TV, and it stuck to the 100% scaling I picked for the othe

ERNOS: Erlang Networked Operating System

I've been reading Dreaming in Code lately, and I really like it. If you're not a dreamer, you may safely skip the rest of this post ;) In Chapter 10, "Engineers and Artists", Alan Kay, John Backus, and Jaron Lanier really got me thinking. I've also been thinking a lot about Minix 3 , Erlang , and the original Lisp machine . The ideas are beginning to synthesize into something cohesive--more than just the sum of their parts. Now, I'm sure that many of these ideas have already been envisioned within Tunes.org , LLVM , Microsoft's Singularity project, or in some other place that I haven't managed to discover or fully read, but I'm going to blog them anyway. Rather than wax philosophical, let me just dump out some ideas: Start with Minix 3. It's a new microkernel, and it's meant for real use, unlike the original Minix. "This new OS is extremely small, with the part that runs in kernel mode under 4000 lines of executable code.&quo

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python . Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening. The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for B