循环列表中给删除功能加上Ajax特效

简介:
前几天一直想实现一个功能就是在循环显示的列表中,删除某一行数据时使用Ajax效果。今天似乎搞定了,唯一值得研究的一点就是对于element标记id的地方。下面给出这个实例的整个过程:
 
generate model product
 
数据迁移任务:
class CreateProducts < ActiveRecord::Migration 
  def self.up 
    create_table :products  do |t| 
      t.column :name,:string 
      t.column :content, :text 
    end 
  end 

  def self.down 
    drop_table :products 
  end 
end
建立一个controller,用来生成脚手架,可以添加product对象数据。
generate controller admin
在controller中添加scaffold :product
另外建立一个list_controller及其两个视图
generate controller list index delete
list_controller中的内容:
class ListController < ApplicationController 

  def index 
    @products=Product.find(:all, :order=>"name") 
     
  end 
   
  def delete 
    Product.find(params[:id]).destroy
     redirect_to :action=>"index" if request.xhr? 
  end 
end 
在index视图中,index.rhtml里添加代码:
<h1>List Products</h1> 
<table> 
<tr> 
  <th>name</th> 
  <th>content</th> 
</tr> 
<%@products.each do |product|%> 
  <tr id= <%="current_product#{product.id}"%>
      <td><%=h(product.name)%></td> 
      <td><%=h(product.content)%></td> 
      <td><%=link_to_remote "delete", :url=>{:action=>"delete", :id=>product}, :complete=>visual_effect(:fade,  "current_product#{product.id}")%></td> 
      </tr> 
    <%end%> 
 </table>
这样从admin/index里可以create products,在list里显示这些数据,也可以实现删除的Ajax效果,一切工作顺利。
这里还有个地方要注意下,    在delete这个action中要加上
redirect_to :action=>"index" if request.xhr?
如果不加这句,firebug会给出一个错误的提示,说你missing template "delete.rhtml", 虽然在支持Javascript的浏览器上不会发生错误,但是如果浏览器不支持Javascript,那么delete就不能正常运行了。




本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/91650,如需转载请自行联系原作者
目录
相关文章
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
XML 前端开发 JavaScript
JS案例:ajax获取图片列表
JS案例:ajax获取图片列表
399 0
JS案例:ajax获取图片列表
|
前端开发
mui中使用ajax实现登录功能demo
mui中使用ajax实现登录功能demo
279 3
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
133 0
|
前端开发 JavaScript
【jquery Ajax 】art-template模板引擎案例——新闻列表
【jquery Ajax 】art-template模板引擎案例——新闻列表
216 1
【jquery Ajax 】art-template模板引擎案例——新闻列表
|
前端开发
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
323 0
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
174 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
515 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
前端开发 安全 JavaScript
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
352 0
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
|
前端开发 JavaScript
基于SSM+Jquery+ajax实现批量删除功能
基于SSM+Jquery+ajax实现批量删除功能
600 0
基于SSM+Jquery+ajax实现批量删除功能