JQuery + thumbs_up gem render vote count？

Question

插件： Thumbs Up &的JQuery 1.5.2（需要另一位寶石）

我試圖呈現一個更新的計票結果W/O完整的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 （在Posts文件夾中）。

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

我一直堅持這一段時間，非常感謝任何幫助你們可以提供。我已經看過JQuery的railscast，並通過其他Stackoverflow的答案，但我仍然在Jquery很不喜歡。

Answer 1

您似乎希望將視圖代碼分隔成部分，並且僅在提供評分時刷新一個部分。

，而不是爲你的控制器，：

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

做這樣的事情：

render :partial => "voutecount" 

在您看來，搬出votewrapper DIV到一個名爲 「_votecount.html.erb」 新文件在相同的目錄中，而代之以渲染代碼：

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

如果要阻止評級當它更新時（推薦），那麼你可能想要調用這個調用並在js中更多地控制它。因此，包括在視圖中你的JavaScript：

<%= javascript_include_tag 'votecount' %> 

具有良好的醇取代你的link_to」 HTML有更多的信息：

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

以及公開/ JavaScript的創建一個新的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(); 
          } 
        }); 
     } 
    }) 

祝你好運！ :)