要实现类似GMail的无刷新文件上传，原理其实很简单，就是将form的target设置为一个iframe，这样当表单提交后刷新的就是那个iframe，而不是form所在的页面，然后再通过Javascript获取iframe内的响应，并将结果展示给用户。


<%= form_for :photo, :html => {:id => 'photo_upload', :multipart => true, :target => 'upload_target'} do |f| %>
<%= f.file_field :file, {:id => 'file_upload', nchange => '$('#photo_upload').submit();'} %>
<%= end %>
<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>


就像上面的代码，当用户选择文件后，表单会自动提交，响应会显示在那个隐藏的iframe里面，如果想要告诉用户上传是否成功（比如是否超出尺寸限制等），就需要读取iframe内的数据，可以让Rails返回JSON格式的结果，然后通过JS直接读取。


# Rails代码
respond_to do |wants|
if @photo.save
wants.html {render :text => {:result => 'success', bject => @photo}.to_json }
else
wants.html {render :text => {:result => 'failed', :errors => @photo.errors}.to_json}
end
end


下面是JS代码，需要为iframe绑定onload方法，这样只有当文件上传结束后，JS才会被调用。


$(function(){
$("upload_target").load(function(){
var result = $('#upload_target').contents.find("body").html();
var data = eval("("+result+")");
if(data['result'] != 'success') {
alert("上传成功！");
} else {
alert("上传失败：" + data['errors'][0][1].join());
}
});
});


下面是抢答的Demo，不支持IE，IE请点这里看完整表单。

无觅猜您也喜欢：
配置ActionMailer使用GMail发送邮件	Plotr：轻量级的Javascript制图库	Aptana IDE: 全新开源Ruby+Rails+JavaScript+HTML工作台	Javascript on Junction: 客户端的RoR
无觅

安装

$ 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增加了如下方法：

1. rating，当前post的平均得分
2. rating_count，评分人数

在可以打分的Model中添加acts_as_rater，比如user：


class User < ActiveRecord::Base
   :acts_as_rater
end

这为User增加了如下方法：

1. 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 ratable_demo
$ cd ratable_demo

2. 安装RESTFul_Auth

$ git clone git://github.com/technoweenie/restful-authentication.git vendor/plugins/restful_authentication
$ ./script/generate authenticated user sessions

3. 安装Ajax Rating

$ cd vendor/plugins
$ git clone git://github.com/yzhang/ajax_rating.git
$ cd ../../
$ ./script/generate ratable

4. 创建打分对象

$ ./script/generate scaffold post title:string body:text
$ rake db:migrate

5. 修改user.rb


class User < ActiveRecord::Base
   :acts_as_rater
end


6. 修改post.rb


class Post < ActiveRecord::Base
  acts_as_ratable
end


7. 修改 app/views/layout/posts.html.erb，包含Prototype和rating.css：


<%= stylesheet_link_tag 'scaffold', 'rating' %>
<%= javascript_include_tag :defaults %>


8. 修改application.rb:


include AuthenticatedSystem


9. 修改app/views/posts/show.html.erb:


<% if logged_in? -%>
   <%= rating_tag current_user, @post %>
<% else -%>
   <%= rating_tag nil, @post %>
   <%= link_to 'login to rating this post', new_session_path %>
<% end -%>


启动server，打开浏览器到/posts，创建一个新的Post，应该就可以看到一个打分的标签了。

无觅猜您也喜欢：
AJAX分页(paginate)	select层叠的AJAX实现	NetBeans IDE: Windows平台最好的Ruby IDE	在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
end

2. 在view中调用will_paginate_remote：

will_paginate_remote(feeds, :param_name => 'feed_page', :update=>'feed-list', :url=>"/feeds/list")

那个URL参数是我加的，因为有时候可能请求不是发给当前页，原文还提供了其它几种方法，我觉得这个不错，比较简单。

更新：感谢Raeboo，发现了一个多page参数的Bug，新代码已解决此问题。

无觅猜您也喜欢：
Ajax Rating: 简易打分插件	select层叠的AJAX实现	自定义will_paginage输出	db:migrate简明指南
无觅

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', '']])
  page << "}"
end
%>
<p>
  <b>Country</b><br />
  <%= f.country_select :country, ['China', 'United States'], {:selected=>'China'},
     nchange => 'change_state(this.options[this.selectedIndex].value)'
%>
</p>
<p>
  <b>States</b><br />
  <%= f.select :state, CHINA_STATES %>
</p>

相比于上一篇，new.rhtml的改动还是比较大的：

• 我们使用country_select来自动生成国家select
• nchange方法现在指向本地的JS函数change_state，而非remote_function生成的一个AJAX函数。
• change_state函数没有向服务器发送请求，它在本地保存了所有支持国家的省份信息

5. 当然，我们需要定义两个名为US_STATES和CHINA_STATES的常量来保存两个国家的省份信息：

US_STATES = [["Please select", ""], [ "Alabama", "AL" ], [ "Alaska", "AK" ], ..........
CHINA_STATES = [["Please select", ""], [ "Beijing", "BJ" ], [ "Shanghai", "SH" ], ..........

6. 默认：

7. 选择United States:

8. 选择其他国家：

参考：

• .rjs and link_to_function
• Rails API参考

无觅猜您也喜欢：
city_helper: 省市二级联动Select插件	select层叠的AJAX实现	Aptana IDE: 全新开源Ruby+Rails+JavaScript+HTML工作台	db:migrate简明指南
无觅

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 => "cities",
       :method => "get",
       :with => "'country_id=' + value + '&partial=select'",
       :url => { :controller => :cities,
         :action => :index}))
  %>
</p>
<p>
  <b>City</b><br />
  <div id="cities">
  <%= f.select (:city_id, []) %>
  </div>
</p>

这段代码为country select定义了onchange函数，它会在country select的选择项变化时重新请求cities/index，并更新city select。

5. 现在打开http://localhost:3000/people/new，你会看到：

6. 但是别着急，工作还没完成，cities/index并不会自动帮你返回一个select，因此我们需要修改cities_controller的index方法：

def index
  if params[:country_id]
    @cities = City.find(:all, :conditions => ["country_id = ?", params[:country_id]])
  else
    @cities = City.find(:all)
  end
  respond_to do |format|
    format.html { render :partial => params[:partial]}
    format.xml { render ml => @districts.to_xml }
  end
end

现在，index action会根据:country_id参数返回指定国家的城市，并根据partial参数来决定如何对数据进行渲染：

format.html { render :partial => params[:partial]}

要将结果渲染为一个select，我们需要定义_select.rhtml，它很简单：

<%= select(:person, :city_id, @cities.collect {|c| [c.name, c.id]}) %>

7. 一切搞掂，现在再次打开http://localhost:3000/people/new，选择中国，你会发现，city select已经跟随你的选择而动态更新了：

8. 很简单，但是还有个问题需要说明，由于IE不支持替换select的innerHTML，因此我们在_select.rhtml中返回了整个 select（本来应该只要options就足够了），注意select的第一个参数是:people，也就是说这个select将只能够为 people/new工作，如果你想要让_select.rhtml更通用些，那就需要再增加一个参数（比如owner)来充当select的第一个参 数。（完）

无觅猜您也喜欢：

AJAX分页(paginate)

Ajax Rating: 简易打分插件

city_helper: 省市二级联动Select插件

RJS实现Select级联

无觅