Loại cảnh báo (thông báo) này rất dễ gặp nếu bạn sử dụng ứng dụng GMail trên nền web. Hôm nay tác giả bài viết này sẽ hướng dẫn bạn tạo một ứng dụng đơn giản bằng cách sử dụng jQuery.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

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

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới