在 ajax 调用删除表行后，rails 如何删除表行？答案

【问题标题】：How can rails remove a table row after an ajax call to delete it?在 ajax 调用删除表行后，rails 如何删除表行？
【发布时间】：2014-09-30 03:57:57
【问题描述】：

如果我有链接-

= link_to 'ajaX', 
  ajax_delete_link_path(link), 
  data: { :confirm => 'Are you sure?', :remote => true }

有路线：

get 'ajax_delete_link/:id', to: 'links#ajax_delete_link', as: :ajax_delete_link

和一个链接控制器：

def ajax_delete_link
  @link = Link.find(params[:id])
  @link.destroy
  respond_to do |format|
    format.js
  end 
end

和ajax_delete_link.js.erb 一起

var element = document.getElementById("id");
element.parentNode.removeChild(element);
# This is the part that doesn't work. Not sure how to access the id

控制器删除数据库记录但不更新页面。我正在尝试删除包含 a 的 td 的父表行

html 就是

        ...
        <td>
          <a href="/ajax_delete_link/396" data-confirm="Are you sure?" data-remote="true">ajaX</a>
        </td>

【问题讨论】：

标签： ruby-on-rails ruby ajax ruby-on-rails-3

【解决方案1】：

你最好做到以下几点

结构

#config/routes.rb
resources :links #-> will provide DELETE domain.com/ajax/:id as destroy action

您的路线需要围绕objects 构建。考虑到您正在尝试创建 destroy 操作，您应该能够向其发送 ajax 请求以使其正常工作

这将使您能够执行以下操作：

#app/views/controller/your_page.html.erb
<%= link_to "Ajax", link_path(link), method: :delete, id: link.id, data: { confirm: "Really?", remote: true } %>

这将向您的links 控制器destroy 操作发送一个ajax (XHR) 请求，您可以按如下方式填充该请求：

#app/controllers/links_controller.rb
Class LinksController < ApplicationController
   def destroy
       @link = Link.find parmas[:id]
       @link.destroy
   end
end

回应

您的回复与您管理mime type 的方式直接相关在您的控制器中。

如果您使用format.js 技术，您可以调用控制器中的@instance method 集来删除有问题的元素。如果您使用标准的 Ajax 回调，您将面临不同的挑战：

#app/controllers/links_controller.rb
Class LinksController < ApplicationController
   def destroy
     ...
     respond_to do |format|
       format.js #-> loads /links/destroy.js.erb
       format.html { redirect_to(links_url) }
      end
   end
end

这将使您能够创建以下内容：

#app/views/links/destroy.js.erb
var element = document.getElementById("<%=j @link.id %>");
element.parentNode.parentNode.remove();

或者，您可以使用ajax success function to facilitate the callback，如下所示：

#app/assets/javascripts/application.js
$(document).on("ajax:succes", "a", function(data){
    $(data.id).remove();
});

【讨论】：

我需要 remote: true 的 html 链接吗？我实际上是在尝试修改代码以支持两种格式。
接受了一些编辑 - 实际链接需要一个 DELETE 操作，因为 DESTROY 不是公认的 HTTP 动词 - 但将所有 rails 内容保留为删除。也将 format.js 放在 format.html 旁边，因为我在另一个区域中使用 html 作为“常规”（非 ajax）删除链接。
最后将删除链接但不是整个表格行的 element.parentNode.removeChild() 更改为 element.parentNode.parentNode.remove(); 它在早期版本中不起作用（7 及更早版本，但我不不关心他们）。
哦，我添加了 remote: true，因为我需要它，否则它将是一个“常规”（非 ajax）链接。
迈克尔 - 感谢您的编辑！解决方案现在有效吗，还是仍然在搞砸/

【解决方案2】：

我认为您的问题是关于如何在 js.erb 模板中引用元素 ID。这是一个 erb，所以你可以这样做：

var element = document.getElementById(<%= @link.id %>);
alert(element); //just to see that it's getting to your template.
element.parentNode.removeChild(element);

只是提醒您需要一个 id 设置为的 html 元素：

id="<%= link.id %>"

【讨论】：

同意，虽然我认为您不应该使用数字作为 id，最好使用 id="ajax_<%= link.id %>" 之类的东西。

【解决方案3】：

如您所见，发出 ajax 请求会更改数据库，但实际上并不会更新页面。您需要为您的 ajax 设置一个回调，该回调会操纵 DOM 以删除您想要删除的表格行。

当您使用 :remote => true 时，Rails 会触发自定义事件（查看 https://github.com/rails/jquery-ujs/wiki/ajax），您可以使用它附加回调。

【讨论】：

【解决方案4】：

<table>
<tr>



    //destroy.js.erb

    $("#row_<%= escape_javascript params[:id] %>").remove();
    <!-- index.html.erb -->
    <table>
    <tr>
      <th>Item Name</th>
      <th></th>
    </tr>

    <tr id="row_<%= @item.id%>">
      <td><%= @item.name %></td>
      <td><%= link_to "Delete" , @item, confirm: 'Are you sure?', method: :delete, remote: true%></td> 
    </tr>
    </table>

确保在您的控制器方法中处理 format.js 以进行销毁

【讨论】：