最近需要给抢答增加文件上传支持，但是个人不喜欢Flash方式，Google了一下，找到这篇实现异步上传的文章，讲的比较清楚。 要实现类似GMail的无刷新文件上传，原理其实很简单，就是将form的target设置为一个iframe，这样当表单提交后刷新的就是那个iframe，而不是form所在的页面，然后再通过Javascript获取iframe内的响应，并将结果展示给用户。
Category Archives: AJAX
Ajax Rating: 简易打分插件
刚完成的一个小插件，比较粗糙，欢迎多提意见。 安装 $ cd vendor/plugins $ git clone git://github.com/yzhang/ajax_rating.git 使用 在你要评分的model中添加acts_as_ratable，比如post： class Post < ActiveRecord::Base :acts_as_ratable end 这为post增加了如下方法： rating，当前post的平均得分 rating_count，评分人数 在可以打分的Model中添加acts_as_rater，比如user： class User < ActiveRecord::Base :acts_as_rater end 这为User增加了如下方法： rating_on(ratable)，返回这个用户为某个对象打的分（1-5） 然后在view中调用： rating_tag(rater, ratable) rater就是打分者，ratable则是被评分的对象，如果rater为nil，则用户只能看到分数，但不能打分。 如果需要自定义外观，可以修改rating.css和images下的star123.png，关于CSS的原理说明请参看（十分对不起原作者，找不到原始出处）：http://www.viphot.com/InfoView/Article_285645.html 如果为了安全考虑，需要限制只有当前登录用户可以打分，可以通过定义RatingsController#current_rater实现： class RatingsController < ActiveController::Base :before_filter :login_required def current_rater current_user end end 这样客户端传递的rater参数将失去作用。 完整例子 1. 创建demo： $ rails [...]
Also posted in 插件 5 Comments
AJAX分页(paginate)
前段时间忙于Shanghai on Rails，没怎么更新，不太好意思，活动纪实随后奉上。 will_paginate是个好插件，但它不支持AJAX，在Ruby on Rails Wiki里找到一篇文章，通过一个很简单的Hack，实现了AJAX的分页，方法如下： 1. 在application_helper.r中定义will_paginate_remote helper: def will_paginate_remote(paginator, options={}) update = options.delete(:update) url = options.delete(:url) str = will_paginate(paginator, options) if str != nil str.gsub(/href=”(.*?)”/) do ”href=\”#\” onclick=\”new Ajax.Updater(‘” + update + “‘, ‘” + (url ? url + $1.sub(/[^\?]*/, ”) : $1) + ”‘, {asynchronous:true, evalScripts:true, method:’get’,}); return false;\”" end end [...]
Posted in AJAX 2 Comments
RJS实现Select级联
还记得前面的那个Ajax Select的例子吗？实际上实现像国家，城市这样option已经确定的select的级联并没有必要使用Ajax，通过客户端JS就可以轻松实现，而不必向服务端发送请求。 1. 生成person resource script/generate person country:string state:string 由于不再需要向服务端发送请求，因此没有必要生成一个单独的city resource。 2. 执行rake db:migrate 3. 修改app/views/layouts/people.rhtml，包含prototype： <%= javascript_include_tag ‘prototype’ %> 4. 修改app/views/people/new.rhtml: <%= update_page_tag do |page| page << “function change_state(country_value) {” page << ‘if(country_value == “United States”)’ page['person_state'].replace_html options_for_select(US_STATES) page << ‘else if(country_value == “China”)’ page['person_state'].replace_html options_for_select(CHINA_STATES) page << ‘else’ page['person_state'].replace_html options_for_select([['Not applicable', '']]) [...]
Also posted in JS Leave a comment
select层叠的AJAX实现
假设我们有两个select，子select的内容需要随父select而动态改变，这篇指南将向你演示如何实现AJAX方式的select层叠： 1. 创建三个资源：country，city，person ruby script/generate scaffold_resource country name:strin ruby script/generate scaffold_resource city country_id:int name:string ruby script/generate scaffold_resource person country_id:int city_id:int name:string 2. 执行rake db:migrate 3. 修改app/views/layouts/people.rhtml，包含prototype： <%= javascript_include_tag ‘prototype’ %> 4. 修改app/views/people/new.rhtml: <p> <b>Country</b><br /> <%= f.select (:country_id, Country.find_all.collect {|c| [ c.name, c.id ] }, { :include_blank => true }, nchange => remote_function(:update => [...]
Also posted in 指南 Leave a comment
