修改元素Rails中使用Ajax [英] Updating Elements in Rails with Ajax

问题描述

该应用程序允许用户投票嵌入式视频。当用户点击向上和向下箭头，整个页面刷新，更新分。我一直在试图实现Ajax投票了好几个月了。我想最简单的解决方案可以提供，即使它是不是最有效的。有任何想法吗？

The app allows users to vote on embedded videos. When users click up and down arrows, the whole page refreshes to update points. I have been attempting to implement AJAX voting for months now. I would like the most straightforward solution you can offer, even if it isn't the most efficient. Any ideas?

我的最高和下从应用程序/控制器/ 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 中，部分从应用程序/视图/连接/ _links_list ，我呈现使用不同的排序方法的其他意见。

A minimalist version of links_list, a partial from app/views/links/_links_list, which I render in other views using various sorting methods

  <% @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和轨道3教程。如果您发布一个链接到一个教程，请建议MODS，将需要采取的地方为它工作。
• 在我运行的Rails 3.1

先谢谢您的任何意见或建议！

Thanks in advance for any feedback or suggestions!

推荐答案

Ajax是pretty的容易的Rails 3.1使用。这篇文章假设你正在使用jQuery为你的JavaScript的驱动程序;如果你不是，你需要安装的jQuery护栏的宝石，但即使在生产中的应用程序添加一个小的创业板不应该是一个真正的大问题。

Ajax is pretty easy to use in Rails 3.1. This post assumes you're using jQuery as your JavaScript driver; if you aren't, you'll need to install the jquery-rails gem, but even for an app in production adding a small gem shouldn't be a really big deal.

您控制器将最终看起来是这样的：

Your controller will end up looking like this:

....

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 

....

视图的变化将是pretty的小：

The view change will be pretty small:

<% @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>

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

And you'll need new files, up.js.erb and down.js.erb, in your app/views/links/ folder, which contains the JavaScript command to update your page:

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

如果你决定去与原型什么的code看起来或多或少相同的;唯一的变化将是JavaScript的你up.js.erb和down.js.erb地方，这应该是原型-Y，而不是jQuery的-Y。

If you decide to go with Prototype or something the code will look more or less the same; the only change will be the JavaScript you place in up.js.erb and down.js.erb, which should be Prototype-y instead of jQuery-y.

这篇关于修改元素Rails中使用Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！