Question

现在我正在为视图上的用户显示通知。我有ajax工作，它通过单击关闭链接从数据库中删除项目。但是，我无法弄清楚如何在不实际刷新页面的情况下更新视图。

我是否不得不使用某种部分？我没有真正做过这样的事情，谷歌搜索真的没有帮助我，因为我似乎要走下兔子洞。

现在我的观点是：

<% current_user.notifications.each do |n| %>
    <div class="alert alert-info">
      <%= link_to 'x', n, :method => :delete, :remote => true, :class => 'delete_notification close'  %>
      <%= n.title %>
      <%= n.description %>
    </div>
<% end %>

然后我有我的js：

$('.delete_notification').bind('ajax:success', function() {  
    $(this).closest('tr').fadeOut();

}）;

我不确定如何提出这个问题，因为我迷失了“下一步”。如果/当我知道还需要提供什么时，我会提供更多信息。

提前致谢！

更新：

我接受了一个答案，因为它非常有帮助，而且正是我在寻找的东西！

我最终提出的是：

$(function(){
  $(".delete_notification").click(function(){
    var $this = $(this);
    var url = $this.data('url');
    $.ajax(url, {
      method: 'DELETE',
      type: 'POST',
      dataType: 'json',
      success: function() {
        var parent = $this.parent();
        parent.fadeOut("slow");
      }
    });
  });
});

Answer 1

自Rails 3以来，link_to的回调选项（:update）被删除了，所以我宁愿自己实现AJAX链接。

<% current_user.notifications.each do |n| %>
    <div class="alert alert-info">
      <%= link_to 'x', n, :class => 'delete_notification close' %>
      <%= n.title %>
      <%= n.description %>
    </div>
<% end %>

设置AJAX以便它通过Rails的CSRF保护：

$.ajaxSetup({
  beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}
});

最后你想要的效果：

$('.delete_notification').click(function(ev) {
  ev.preventDefault();  // prevent refreshing page
  var $this = $(this);
  var url = $this.attr('href');
  $.ajax(url, {method: 'DELETE'}).done(function() {
    $this.closest('tr').fadeOut();
  });
});

也许你也应该修改你的控制器（我没有测试过这个）：

class NotificationsController < ApplicationController
  # Other actions ...

  def destroy
    # Your logic (remove rendering or redirection)
    head :no_content
  end
end

Answer 2

在视图中创建名为destroy.js.erb的js模板，并在该文件中包含您要运行的javascript - 如下所示：

$('#delete_notification_<%= params[:id] %>').closest('tr').fadeOut();

在您的视图中，请确保指定链接的ID：

<%= link_to 'x', n, method: :delete, remote: true, class: 'delete_notification close' id: "delete_notification_#{n.object.id}" %>

从数据库中销毁项目后更新视图

2 个答案: