September
5th, 2008
An unobtrusive and consistent JavaScript ajax notification api
AJAX can do wonders to a user interface. It can also destroy one. One of the most tedious tasks when building AJAX interfaces is providing feedback to the user. Non AJAX interfaces are much more synchronous so you only have one message to display at a time. It’s not uncommon for AJAX applications to have asynchronous actions performed by the user. This requires a new approach to providing feedback to the user that what they tried to do succeeded or failed.
The desolate state notifications
The monolithic approach of embedding a message near the top of the page (generally under the header) doesn’t scale for multiple messages. AJAX interfaces demand an unobtrusive and scalable framework to enable frequent communication with the user. I’ve outlined some of the requirements as:
* Messages which do not interfere with the modules or elements on the page
* A framework which allows numerous messages to be displayed simultaneously
* Automatic display and removal of messages without user intervention
* A persistence engine which keeps a log of messages for the user to view at any time
* Reusable JavaScript api to invoke a message
Diving into the notification black hole
It seemed evident that absolutely positioned notifications which drop down from the top right corner of a web page would be a perfect spot (but should obviously be configurable). I (literally) hacked together a JavaScript library using YUI that did just that.
var notifier = YAHOO.notify();
notifier.send("You successfully added the tags jaisen, rachel and sunnyvale to your photo.");
A working example can be found here.
The Source
You can find the source for the guts of the JavaScript at GitHub. http://github.com/jmathai/epicode/tree/master/htdocs/javascript/yui/EpiNotify.js
Disclaimer :)
I wouldn’t necessarily recommend using it yourself (though it does work). It’s actually in a very beta state right now but I plan on cleaning it up soon (help would be greatly appreciated).
