google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






How to create AJAX Notifications with jQuery It'll be very easy to view the type of this notification if you're using GMail one the web based environment. Today, the author of this post guides you to build a simple application for displaying the notifications, using jQuery.


Label: GMail, AJAX Notification, jQuery, Notification, AJAX, application

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

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");
}
});
});

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web