使用Ajax更新Rails中的元素

Question

该应用程序允许用户对嵌入的视频进行投票.当用户单击向上和向下箭头时,整个页面将刷新以进行更新points.我几个月来一直试图实施AJAX投票.我希望你提供最直接的解决方案,即使它不是最有效的.有任何想法吗？

我up和down来自行动app/controllers/links_controller

  ....

  def up
    @link = Link.find(params[:id])
    @link.update_attribute :points, @link.points + 1
    redirect_to :back 
  end

  def down 
    @link = Link.find(params[:id])
    @link.update_attribute :points, @link.points - 1
    redirect_to :back 
  end 

  ....

我使用各种排序方法在其他视图中呈现的极简主义版本links_list,部分来自app/views/links/_links_list

  <% @links.each do |link| %>
        <div class="row">
            <div class="span2">
                <%= link_to (image_tag ("up.png")), up_link_url(link), :method => :put %> 
                <%= link.points %>
                <%= link_to (image_tag ("down.png")), down_link_url(link), :method => :put %>
            </div>
            <div class="span8">
                <%= link_to strip_tags(link.title), link %> 
            </div>
        </div>
  <% end %>

• 我想在不使用外部宝石的情况下实现这一目标,该应用程序已经投入生产
• 我可能已经看过并尝试了大多数与ajax和rails相关的rails 3教程.如果您发布指向教程的链接,请建议为其工作而需要进行的mod.
• 我正在运行Rails 3.1

提前感谢您的任何反馈或建议!

Answer 1

Ajax在Rails 3.1中非常容易使用.这篇文章假设您使用jQuery作为JavaScript驱动程序; 如果你不是,你需要安装jquery-rails gem,但即使对于生产中的应用程序来说,添加一个小宝石也不是什么大不了的事.

你的控制器最终看起来像这样:

....

def up
  @link = Link.find(params[:id])
  @link.update_attribute :points, @link.points + 1
  respond_to do |format|
    format.html {redirect_to :back}
    format.js
  end
end

def down 
  @link = Link.find(params[:id])
  @link.update_attribute :points, @link.points - 1
  respond_to do |format|
    format.html {redirect_to :back}
    format.js
  end
end 

....

视图更改将非常小:

<% @links.each do |link| %>
  <div class="row">
    <div class="span2">
      <%= link_to (image_tag ("up.png")), up_link_url(link), :method => :put, :remote => true %> 
      <%= link.points %>
      <%= link_to (image_tag ("down.png")), down_link_url(link), :method => :put, :remote => true %>
     </div>
     <div class="span8">
       <%= link_to strip_tags(link.title), link %> 
     </div>
  </div>

你还需要新的文件,up.js.erb和down.js.erb,在您的应用程序/视图/链接/文件夹,其中包含的JavaScript命令来更新你的页面:

$(".span2").html("This post has <%= @link.points %> points.")

如果您决定使用Prototype或其他东西,代码看起来或多或少相同; 唯一的变化是你放在up.js.erb和down.js.erb中的JavaScript,它应该是Prototype-y而不是jQuery-y.