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

前端之家收集整理的这篇文章主要介绍了ruby-on-rails – 在ajax调用之后rails如何删除表行以删除它?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有链接
= 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>

解决方法

你最好做以下事情

结构体

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

您的路线需要围绕对象构建.考虑到您正在尝试创建销毁操作,您应该能够向其发送ajax请求以使其正常工作

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

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

这将向您的链接控制器销毁操作发送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方法集以删除有问题的元素.如果您使用标准的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();
});
原文链接:https://www.f2er.com/ruby/270201.html

猜你在找的Ruby相关文章