2

プラグイン： Thumbs Up＆JQuery 1.5.2（別の古い宝石に必要）

ユーザーが投稿に投票したときに、完全な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のレールキャストを見て、他のStackoverflowの回答を調べましたが、それでもJqueryにはかなり慣れていません。

4

1 に答える 1

6

ビューコードをパーシャルに分割し、評価が提供されたときにパーシャルを1つだけ更新することをお勧めします。

コントローラの場合、代わりに：

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

次のようなことをします：

render :partial => "voutecount"

ビューで、votewrapper divを同じディレクトリ内の「_votecount.html.erb」という新しいファイルに移動し、代わりにレンダリングコードを設定します。

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

更新中（推奨）に評価をブロックしたい場合は、呼び出しをajax化して、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>

そして、次のコンテンツを含む新しいvotecount.jsをpublic/javascriptsフォルダーに作成します。

  $(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 に答える