rails3 rails.js và jquery bắt thành công và thất bại của yêu cầu ajax

Question

Trước đây, trong đường ray 2.3.8 tôi đã sử dụng nguyên mẫu-người trợ giúp link_to_remote và form_remote_for (trong số những người khác).

Những có tùy chọn :update như sau:

link_to_remote "Add to cart", 
    :url => { :action => "add", :id => product.id }, 
    :update => { :success => "cart", :failure => "error" } 

(một ví dụ từ documentation). Ví dụ này sẽ, sau khi cập nhật thành công phần tử html với lớp "giỏ hàng" và khi lỗi "lớp" lỗi.

Bây giờ tôi tin rằng cách làm việc đã thay đổi, thay vì chúng ta viết:

link_to "Add to cart", :url => {:action => "add", :id => product.id}, 
    :remote => true 

và không có tùy chọn để thiết lập :update nữa. Thay vì một html bình thường, bây giờ chúng ta làm cho javascript, như thế này (trong jquery):

$('.cart').replaceWith(<%= escape_javascript(render :partial => 'cart') %>) 

nhưng làm thế nào để bạn xử lý một tình huống lỗi? Tôi có xử lý nó trong bộ điều khiển và sử dụng các chế độ xem riêng biệt không?

Có vẻ như hữu ích đối với tôi bằng cách nào đó có thể bắt chước hành vi mà chúng tôi đã có trước đây. Bất kỳ ý tưởng?

Answer 1

Ha! Tôi tìm thấy nó được mô tả trong this bài viết. Trong rails.js callbacks sau được kiểm tra:

• ajax: tải: kích hoạt trước khi thực hiện các yêu cầu AJAX
• ajax: Thành công: kích hoạt sau khi một yêu cầu AJAX thành công
• ajax: hoàn thành: kích hoạt sau AJAX yêu cầu được hoàn tất, bất kể tình trạng của phản ứng
• ajax: thất bại: kích hoạt sau khi một yêu cầu AJAX thất bại, như đối diện với ajax: thành công

như javascript nên không phô trương, khớp nối này không được thực hiện trong HTML.

Một ví dụ (từ cùng một trang web): Rails sau 2.3.8

<% form_remote_tag :url => { :action => 'run' }, 
     :id => "tool-form", 
     :update => { :success => "response", :failure => "error" }, 
     :loading => "$('#loading').toggle()", :complete => "$('#loading').toggle()" %> 

được phiên dịch sang này:

<% form_tag url_for(:action => "run"), :id => "tool-form", :remote => true do %> 

và bên trong một số javascript (application.js), bạn có ràng buộc các sự kiện

jQuery(function($) { 
    // create a convenient toggleLoading function 
    var toggleLoading = function() { $("#loading").toggle() }; 

    $("#tool-form") 
    .bind("ajax:loading", toggleLoading) 
    .bind("ajax:complete", toggleLoading) 
    .bind("ajax:success", function(xhr, data, status) { 
     $("#response").html(status); 
    }); 
}); 

Tuyệt vời!:)

[UPDATE: 29/12/2011]

Hai sự kiện này đã được đổi tên thành gần đây:

• ajax:beforeSend: thay thế cuối ajax:loading
• ajax:error thay thế ajax:failure (tôi đoán là phù hợp hơn với chính jQuery)

Vì vậy, ví dụ của tôi sẽ trở thành:

$("#tool-form") 
    .bind("ajax:beforeSend", toggleLoading) 
    .bind("ajax:complete", toggleLoading) 
    .bind("ajax:success", function(xhr, data, status) { 
     $("#response").html(status); 
    }); 

Để hoàn chỉnh, các sự kiện và các thông số mong đợi của họ:

.bind('ajax:beforeSend', function(xhr, settings) {}) 
.bind('ajax:success', function(xhr, data, status) {}) 
.bind('ajax:complete', function(xhr, status) {}) 
.bind('ajax:error', function(xhr, data, status) {}) 

Answer 2

Tôi biết câu hỏi này là 3 tuổi, nhưng nó đi lên cao trong kết quả Google và một số sự kiện nêu trên không được sử dụng nữa không.

Xem ở đây cho một danh sách hiện tại - https://github.com/rails/jquery-ujs/wiki/ajax

Answer 3

Các đường ray liên quan 4 hướng dẫn có thể được tìm thấy tại địa chỉ: http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Nó chỉ vào tài liệu của các sự kiện tại địa chỉ: https://github.com/rails/jquery-ujs/wiki/ajax, như đã đề cập bởi ncherro

Giá trị thực tế được chuyển đến callbacks có thể được suy ra từ phương thức ajax của jQuery http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

.bind được phản đối ủng hộ .on bởi jQuery: http://api.jquery.com/on/

Vì vậy, bây giờ là cách tiếp cận đề nghị là:

mẫu:

<%= link_to 'Click me!', 
    'path/to/ajax', 
    remote: true, 
    id: 'button', 
    method: :get, 
    data: {type: 'text'} 
%> 

CoffeScript:

$(document).ready -> 
    $("#button").on("ajax:success", (e, data, status, xhr) -> 
    alert xhr.responseText 
).on "ajax:error", (e, xhr, status, error) -> 
    alert "error"