2

插件： Thumbs Up & JQuery 1.5.2（需要另一个旧 gem）

当用户对帖子进行投票时，我正在尝试使用完整的 HTTP 请求呈现更新的投票计数。目前，它会在每次投票时刷新页面。

职位控制器

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 样式），右侧有内容）

 <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（在帖子文件夹中）。 

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

我已经坚持了一段时间，非常感谢你能提供的任何帮助。我已经看过 Jquery railscast 并查看了其他 Stackoverflow 答案，但我对 Jquery 仍然很陌生。

4

1 回答 1

6

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

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

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

执行以下操作：

render :partial => "voutecount"

在您看来，将votewrapper div 移出到同一目录中名为“_votecount.html.erb”的新文件中，并使用渲染代码：

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

如果您想在刷新时阻止评分（推荐），那么您可能需要 ajaxify 调用并在 js.js 中对其进行更多控制。因此，在视图中包含您的 javascript：

<%= javascript_include_tag 'votecount' %>

用好的 ol' html 替换你的 link_to 以获得更多信息：

<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，其内容如下：

  $(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();
                            }   
                   });
        }
    })

祝你好运！:)

于 2011-06-20T19:41:23.040 回答