Rails link_to: Làm điều gì đó sau khi xác nhận

Question

Tôi đang cố gắng để thực hiện một hành động tiết kiệm thông qua AJAX sử dụng link_to:

<%= link_to 'Save', image_path(image), method: :patch, 
     data:{ confirm: 'Save image?', remote: true } %> 

Tôi muốn liên kết để được thay thế bằng <span>Saving...</span> trên xác nhận, nhưng không thể tìm ra một cách sạch sẽ để làm điều đó.

Vấn đề với các giải pháp hiện có:

disable_with:
Nếu tôi thêm :disable_with => '<span>Saving...</span>' HTML bên trong của liên kết sẽ được thay thế thay vì liên kết riêng của mình. Không muốn điều đó.

onclick:
Nếu tôi thêm :onclick => "$(this).replaceWith('<span>Saving...</span>');" liên kết sẽ được thay thế ngay lập tức, ngay cả khi người dùng hủy bỏ xác nhận

Có một giải pháp phù hợp với Rails 3 UJS thực hành tốt nhất?

Answer 1

Tôi nghĩ đây là trường hợp mà chức năng bạn muốn vượt quá những gì được cung cấp bởi người trợ giúp JS của Rails. Tại thời điểm này tôi sẽ chỉ tránh sử dụng: xác nhận và: tùy chọn từ xa để link_to, và thực hiện nó trong đồng bằng jQuery UJS hoặc tương tự.

Bạn cũng có thể nghĩ đến việc ẩn liên kết và hiển thị khoảng 'Đang lưu ...' khi người dùng xác nhận thay vì thay thế html; Tôi nghĩ rằng nó sẽ kết thúc đơn giản theo cách đó, và vẫn cung cấp cho bạn hiệu quả mà bạn đang tìm kiếm.

Answer 2

Bạn có thể dùng móc ajax:beforeSend:

$('a#my_link_to').bind('ajax:beforeSend', function(evt, xhr, settings) { 
    $(this).replaceWith('<span>Saving...</span>'); 
}) 

Và sau đó bạn có thể thêm một ràng buộc để ajax:success:

$('a#my_link_to') 
    .bind('ajax:beforeSend', function(evt, xhr, settings) { 
    $(this).replaceWith('<span id="saving">Saving...</span>'); 
    }) 
    .bind('ajax:success', function(evt, data, status, xhr) { 
    $('span#saving').replaceWith('Saved!'); 
    }) 

Lưu ý: Vui lòng tham khảo các bình luận dưới đây cũng là rất quan trọng

Answer 3

Tôi nghĩ bạn nên sử dụng xác nhận: hoàn thành sự kiện. (Chi tiết: https://github.com/rails/jquery-ujs/blob/master/src/rails.js)

Answer 4

Đây là cách tôi đã kết thúc làm việc đó:

<%= link_to 'Save', image_path(image), method: :patch, 
     data:{ confirm: 'Save image?', remote: true }, 
     onclick: "$(this).one('ajax:beforeSend', 
      function(e) { $(this).replaceWith('<span>Saving...</span>'); });" %> 

(Vấn đề với giải pháp này là xử lý tích lũy nếu người dùng nhấp chuột, không xác nhận, nhấp chuột một lần nữa, vv .. Vì vậy nó không lý tưởng ...)

Answer 5

Bạn có thể sử dụng sự kiện confirm:complete. Nó nhận được một đối số boolean thứ hai được thông qua cho biết kết quả đã được hủy hay ok.