充当可投票的javascript投票按钮

时间:2014-04-02 03:23:06

标签: javascript ruby-on-rails ruby ruby-on-rails-4

我正在使用名为acts_as_votable的宝石来使我的模型可以投票。

目前一切正常。

但每次有人投票支持帖子时,页面都必须刷新。如何在没有页面刷新的情况下让投票工作。我可以添加一个简单的JavaScript吗?

以下是我在控制器中的内容:

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
  respond_to do |format|
    format.html {redirect_to :back }
  end
end

以下是我的看法:

 <%= link_to “like post", like_post_path(@post), method: :put %>

3 个答案:

答案 0 :(得分:9)

一个非常简单的版本可能如下所示:

红宝石

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
  respond_to do |format|
    format.html {redirect_to :back }
    format.json { render json: { count: @post.liked_count } }
  end
end

HTML

<%= link_to 'like', vote_path(@post), class: 'vote', remote: true, data: { type: :json } %>

JS

$('.vote')
  .on('ajax:send', function () { $(this).addClass('loading'); })
  .on('ajax:complete', function () { $(this).removeClass('loading'); })
  .on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
  .on('ajax:success', function (data) { $(this).html(data.count); });

这是一个非常基本的版本,显示了基本方法,但它有一些明显的缺陷:

  • 没有办法&#34; unvote&#34;
  • A&#34; loading&#34;指标不是很好的用户体验;使用JS,我们可以始终显示用户的当前状态,并在后台处理与服务器的同步
  • 视图中的任何HTML缓存都会将其搞砸

答案 1 :(得分:5)

简单。带走你的回应块:

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
end

并使您的按钮遥控:

<%= link_to “like post", like_post_path(@post), method: :put, remote: true %>

如果您希望在某人投票弹出消息或某事时运行脚本,请创建文件vote.js.erb(通过rails命名约定)并将其放在视图文件夹中。 您可以在其中放置javascript,以便在访问控制器操作时运行。

PS,您确定路径like_post_path指向您的vote控制器吗?

答案 2 :(得分:2)

Ruby on Rails为此提供了Ajax helpers。 例如:

<%= link_to “like post", like_post_path(@post), method: :put, remote: true %>

但是,您需要使用JavaScript手动更新投票计数器。