使用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 %> 

• 我會在其他視圖渲染喜歡在不使用外部寶石的情況下實現這一點，該應用程序已經在生產
• 我可能已經見過並嘗試過大多數rails 3與ajax和rails相關的教程。如果你發佈了一個教程鏈接，請建議需要進行修改的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，在您的app/views/links /文件夾中，其中包含用於更新頁面的JavaScript命令：

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

如果您決定使用Prototype或其他東西，代碼看起來會差不多;唯一的變化是你放在up.js.erb和down.js.erb中的JavaScript，它應該是Prototype-y而不是jQuery-y。