ruby-on-rails - rails 如何在调用 ajax 删除表行后删除它？

Question

如果我有一个链接-

= 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

和一个链接 Controller :

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

Controller 删除数据库记录但不更新页面。我正在尝试删除包含 a

的 td 的父表行

html 是

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

Answer 1

你最好做到以下几点

---

结构

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

您的路由需要围绕对象 构建。考虑到您正在尝试创建一个 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 Controller destroy 操作发送一个 ajax ( XHR) 请求，您可以按如下方式填充该操作:

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

--

响应

您的 react 与您管理 mime type 的方式直接相关在你的 Controller 中。

如果您使用format.js 技术，您可以调用 Controller 中设置的@instance 方法 来删除有问题的元素。如果您使用标准的 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();
});