在ajax调用之后rails如何删除表行以删除它?

时间:2014-08-07 03:15:13

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

如果我有链接 -

= 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>

4 个答案:

答案 0 :(得分:3)

你最好做以下事情


<强>结构

#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();
});

答案 1 :(得分:1)

我认为您的问题是如何在js.erb模板中引用元素ID。这是一个错误,所以你可以做到:

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 %>"

答案 2 :(得分:0)

正如您所见,制作ajax请求会更改数据库,但实际上并未更新页面。您需要为您的ajax设置一个回调函数来操作DOM以删除您想要删除的表行。

当您使用:remote => true时,Rails会触发自定义事件(请查看https://github.com/rails/jquery-ujs/wiki/ajax),您可以使用{{1}}附加回调。

答案 3 :(得分:0)

<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以进行销毁