Rails link_to: 确认后执行操作

Question

我正在尝试使用 link_to 通过 AJAX 执行保存操作：

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

我希望在确认后用<span>Saving...</span>替换链接，但无法找到一个干净简洁的方法来实现。

现有解决方案存在的问题：

disable_with:
如果我添加:disable_with => '<span>Saving...</span>'，链接的内部HTML将被替换，而不是链接本身。这不是我想要的。

onclick:
如果我添加:onclick => "$(this).replaceWith('<span>Saving...</span>');"，即使用户取消确认，链接也会被立即替换。

是否有符合Rails 3 UJS最佳实践的解决方案？

- Yarin

Answer 1

你可以使用钩子ajax:beforeSend：

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

然后你可以添加一个绑定到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!');
  })

注意：请参考下面的评论，这也非常重要。

- MrYoshiji

---

请注意，成功处理程序从未被调用 - 因为您替换了$(this)，绑定被销毁了... - Yarin

Answer 2

我认为这是一种情况，您想要的功能超出了Rails的JS助手所提供的范围。此时，我建议避免使用link_to的:confirm和:remote选项，并使用纯jQuery UJS或类似方法实现它。

您还可以考虑隐藏链接并在用户确认后显示“正在保存”的span，而不是替换HTML；我认为这样会更简单，并且仍然可以给您想要的效果。

- sockmonk

Answer 3

我认为你应该使用confirm:complete事件。（详情请查看：https://github.com/rails/jquery-ujs/blob/master/src/rails.js）

- hedgesky

---

@hedgesky- 这样行不通 - confirm:complete 事件会在确认被取消或确认后触发。 - Yarin

你是对的，在文档中他们说：“无论用户是否回答了对话框，都会触发confirm:complete事件”。 - MrYoshiji

Answer 4

这是我最终的做法：

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

这个解决方案的问题在于，如果用户点击但不确认，再次点击等等，处理程序会累积，因此并不理想...

- Yarin

Answer 5

您可以使用confirm:complete事件。它会传递第二个布尔参数，告诉您结果是取消还是确定。

- troelskn