rails link_to :remote

Question

我有以下内容：

<%= link_to my_path, method: :delete, confirm: 'Delete?', class: 'link-delete', 'data-message' => 'Are you sure?', 'data-severity' => 'danger', :remote => true do %>
  <i class="icon-trash"></i>
<% end %>

我想要在弹出 Bootstrap 对话框进行确认时，挂接到Ajax调用中，以便我可以显示旋转图标或一些文本。

我知道如果我在link_to中不使用“：remote => true”，我可以使用不显眼的JavaScript来监听单击事件，就像下面这样：

jQuery ->
  $('.link-delete').live 'click', (event) ->
    $('.link-delete').html("Loading...")  #THE MSG OR ANIMATION I WANT TO DISPLAY
    $.get(this.href, null, null, 'script')
   false

但不确定如何在使用“:remote => true”时将这两者结合起来

有什么建议吗？

感谢帮助

- cgiacomi

---

这可能是你正在寻找的内容：github.com/rails/jquery-ujs/wiki/ajax - michaelrshannon

Answer 1

您可以像这样绑定ajax调用：

<%= link_to my_path, method: :delete, confirm: 'Delete?', class: 'link-delete', 'data-message' => 'Are you sure?', 'data-severity' => 'danger', :remote => true do %>
  <i class="icon-trash"></i>
<% end %>

$('.link-delete').bind('ajax:beforeSend', function() {
  $('#mySpinner').show();
});

$('.link-delete').bind('ajax:complete', function() {
  $('#mySpinner').hide();
});

- Arjan

---

我也在尝试做同样的事情，但是一些原因导致 ajax:complete 没有被触发。只有 beforeSend 起作用了。在我的情况下，我使用的是 GET 方法。 - Rahul Dess

@RahulDess 你的服务器是否正在生成响应？我能想到完全回调函数未触发的唯一原因是请求从未完成。 - Arjan

请求成功完成，但值得注意的一点是我在控制器中通过JavaScript呈现了部分内容。这会改变什么吗？ - Rahul Dess

如果控制器返回替换链接（或包含它的内容）的JavaScript，则如果DOM中原始链接不再存在以便事件从中传播，那么不触发ajax:complete是有意义的。（在旋转器情况下，这可能不是问题，因为旋转器也可能已经被清除了。） - antinome

Answer 2

您不需要将两者合并。只需使用 format.js 调用 JavaScript。

在您的控制器中：

控制器

 def my_method
     #code here
     respond_to do |format|
      format.js  {}
     end
    end

my_method.html.erb

<div id = "link-delete"></div>

my_method.js.erb

$("#link-delete").html("<%= escape_javascript(render(:partial => "text_message"))%>");

_text_message.html.erb

<p>Loading...</p>

- My God

---

可以简化为$("#link-delete").html("<%=j render "text_message")%>");，该语句的作用是将名为"text_message"的局部模板渲染后的结果插入到id为"link-delete"的元素中。其中，"<%=j %>"用于在JavaScript代码中转义HTML特殊字符。 - Arjan

哇，我从来不知道这个。很好。但是它怎么知道你是在渲染部分还是只是简单的文本？你没有在你的渲染中定义部分。 - My God

当然，我知道这一点，但那是在执行ajax请求之后。我想在调用ajax之前显示“正在加载...”消息。 - cgiacomi

基本上，在我的控制器调用操作之前，应该显示“正在加载...”消息。问题是，使用Bootstrap模态框时，我似乎失去了对调用过程的控制。 - cgiacomi

@SaurabhJain 没错！我也想不出如何挂接到“click”事件并向实际调用添加自定义jQuery / javascript（就像我使用我的小型非侵入式javascript一样）。至少当我使用：remote => true时不能这样做。 - cgiacomi