通过js实现删除功能 ruby on rails

本文介绍如何在Ruby on Rails应用中结合JavaScript实现删除功能。通过在删除按钮上设置remote: true,将点击事件转化为AJAX请求。在控制器的destroy方法内处理JS请求,实现无刷新页面的删除操作。
摘要由CSDN通过智能技术生成

(1)首先给删除按钮增加一个属性 remote: true,这样ujs将这个click动作转化为ajax调用,

 app/views/products/_product.html.erb

<tr id="product_<%= product.id %>">
  <td><%= link_to product.id, product_path(product) %></td>
  <td id="product_<%= product.id %>_name"><%= product.name %></td>
  <td id="product_<%= product.id %>_price"><%= number_to_currency product.price, unit: "¥" %></td>
  <td id="product_<%= product.id %>_description"><%= product.description %></td>
  <td><%=l product.created_at %></td>
  <td>
    <%= link_to t('.edit', :default => t("helpers.links.edit")),
      edit_product_path(product), :class => 'btn btn-default btn-xs editProductLink',
      remote: true, data: {type: 'json'} %>
      <%= link_to t('.destroy',
        :default => t("helpers.links.destroy")),
        product,
        :remote => true,
        :method => :delete,
        :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },
        :class => 'btn btn-xs btn-danger' %>
  </td>
</tr>


(2)在controller的destory方法里,增加接收js的请求代码

  def destroy
    @product.destroy
    respond_to do |format|
      format.html { redirect_to products_url, notice: 'Product was successfully destroyed.' }
      format.json { head :no_content }
      format.js
    end
  end

(3)新增文件 app/views/products/destroy.js.erb,用的是fadeout方法,会渐变的将这一行隐藏掉。

$('#product_<%= @product.id %>').fadeOut();




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值