jQuery + thumbs_up gem渲染投票计数? [英] JQuery + thumbs_up gem render vote count?

问题描述

插件: 竖起大拇指& JQuery 1.5.2(需要另一个旧的gem)

Plugins: Thumbs Up & JQuery 1.5.2 (needed for another old gem)

当用户对帖子投票时，我正在尝试提供不带完整HTTP请求的更新的投票计数.目前，它会在每次投票时刷新页面.

I'm trying to render an updated vote count w/o a full HTTP request when a user votes on a post. Currently, it refreshes the page on every vote.

帖子控制器

def vote_up
  post = Post.find(params[:id])
  current_user.vote_exclusively_for(post)
  respond_to do |format|
    format.js
    format.html {rRedirect_to :back}
  end
end

def vote_down
  post = Post.find(params[:id])
  current_user.vote_exclusively_against(post)
  respond_to do |format|
    format.js
    format.html {redirect_to :back}
  end
end

投票视图(每个帖子div的左侧都有一个div投票(digg/reddit样式)，右侧是内容)

Vote View (each post div has a vote div on the left (digg/reddit style) and content on the right)

 <div class="post">
 <div class="vote">
 <div class="votewrapper">
  <span class="votecount">
  <%= post.votes_for - post.votes_against %>
    </span>
  <div class="votebtn">
   <%= link_to image_tag('vote.png'), vote_up_post_path(post), :method => :post, :format => :js %>
     </div>
   </div>
   </div>
   <div class="postcontent">
   all the post content, timestamp stuff, etc...
   </div>
   </div>

vote_up.erb.js(在Posts文件夹中).

vote_up.erb.js (in the Posts folder).

$(".votecount").html(
"<%= escape_javascript post.votes_for - post.votes_against %>");

我已经坚持了一段时间，非常感谢您会提供的任何帮助.我看过Jquery的Railscast并浏览了其他Stackoverflow的答案，但是我对Jquery仍然很不满意.

I've been stuck on this for a while and would very much appreciate any help ya'll can offer. I've seen the Jquery railscast and looked through other Stackoverflow answers, but I'm still quite noobish at Jquery.

推荐答案

似乎您希望将视图代码分成多个部分，并且仅在提供评级时才刷新一个部分.

It seems like you'll want to separate out your view code into partials and only refresh one partial when a rating is provided.

对于您的控制器，而不是:

For your controller, instead of:

respond_to do |format|
    format.js
    format.html {redirect_to :back}
  end

执行以下操作:

render :partial => "voutecount"

在您看来，将votwrapper div移到同一目录中的一个名为"_votecount.html.erb"的新文件中，而是使用呈现代码:

In your view, move out the votewrapper div into a new file called "_votecount.html.erb" within the same directory, and instead have the render code:

 <%= render :partial => "votecount" %>

如果您想在刷新时阻止评级(推荐)，那么您可能希望取消该调用并在js中对其进行更多控制.因此，在视图中包含您的JavaScript:

If you want to block the rating while it's refreshing (recommended), then you may want to ajaxify the call and control it more in the js. So, include your javascript within the view:

<%= javascript_include_tag 'votecount' %>

用优质的html替换您的link_to以获取更多信息:

replace your link_to with good ol' html to have more info:

<a href="" class="ratelink" updown="up" theid="123"><img src = "...."></a>
<a href="" class="ratelink" updown="down" theid="123"><img src = "...."></a>

并在public/javascripts文件夹中创建一个新的votecount.js，其中包含以下内容:

And create a new votecount.js in your public/javascripts folder with the following content:

  $(function(){
        $(".ratelink").click(function(){
            var val = $(this).attr('updown');
            var theid = $(this).attr('theid');
            $("#votewrapper").block({ //blocks rate-rates while processing
                message: null,
                overlayCSS: {
                    backgroundColor: '#FFF',
                    opacity: 0.6,
                    cursor: 'default'
                },
            });
        if (val == "up") {
        $.ajax({
                type: 'PUT',
                url: "/mymodel/voteup?id="+theid,
                success: function(){
                            $("#votewrapper").unblock();
                            }   
                   });
        } else {
             $.ajax({
                type: 'PUT',
                url: "/mymodel/votedown?id="+theid,
                success: function(){
                            $("#votewrapper").unblock();
                            }   
                   });
        }
    })

祝你好运！ :)

这篇关于jQuery + thumbs_up gem渲染投票计数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！