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