喜欢/不喜欢按钮在博客w/ajax轨道

Question

回到这里后，我试图在博客般的网站上最初制作喜欢/不喜欢的按钮，并尝试使用重定向到：后面和一些锚点，但没有奏效。我现在试图使用ajax自动更新喜欢或不喜欢按钮，当有人点击链接，而没有整个页面重新加载。我知道还有很多这样的其他问题，但我一直无法找到解决我的问题的问题。我目前有喜欢和不喜欢按钮工作，但我需要刷新页面切换它们，这意味着计数器不会自动更新。任何帮助是极大的赞赏：

故事控制器

def upvote 
    @story = Story.find(params[:id]) 
    @story.upvote_by(current_user) 
    respond_to do |format| 
    format.html {redirect_to :back} 
    format.js { render layout: false } 
    end 
end 

def downvote 
    @story = Story.find(params[:id]) 
    @story.downvote_by(current_user) 
    respond_to do |format| 
    format.html { redirect_to :back } 
    format.js { render layout: false } 
    end 
end 

index.html.erb

<%= link_to like_story_path(story), method: :put, remote: true, class: "btn btn-warning btn-xs" do %> 
That scared me! <span class="text-warning"> </span> <% end %>(<%= story.get_upvotes.size %>) 


<%= link_to dislike_story_path(story), method: :put, remote: true, class: "btn btn-success btn-xs" do %> 
You Wimp! <span class="text-warning"></span><% end %> 
(<%= story.get_downvotes.size %>) 

upvote.js.erb

$('.upvote_story').bind('ajax:success', function(){ 
    $(this).parent().parent().find('.upvote_count').html('<%= escape_javascript @story.votes_for.size.to_s %>'); 
    $(this).closest('.like_story').hide(); 
    $(this).closest('.upvotes').html(' <%= link_to "dislike", dislike_story_path(@story), remote: true, method: :get, class: 'dislike_story' %>'); 
}); 

downvote.js.erb

$('.downvote_story').bind('ajax:success', function(){ 
    $(this).parent().parent().find('.upvote_count').html('<%= escape_javascript @story.votes_for.size.to_s %>'); 
    $(this).closest('.dislike_story').hide(); 
    $(this).closest('.downvotes').html(' <%= link_to "like", like_story_path(@story), remote: true, method: :get, class: 'like#story' %>'); 
}); 

_story.html.erb

<div class="story_partial" id="story_<%= story.id %>"> 
    <%= story.content %> 
    <div id="downvote_button_<%= story.id %>"> 
    <%= link_to "dislike", downvote_path, method: "post", remote: true %> 
    </div> 
</div> 

<div class="story_partial" id="story_<%= story.id %>"> 
    <%= story.content %> 
    <div id="upvote_button_<%= story.id %>"> 
    <%= link_to "like", upvote_path, method: "post", remote: true %> 
    </div> 
</div> 

和路线：

resources :stories do 
    member do 
    put :like, to:'stories#upvote' 
    put :dislike, to:'stories#downvote' 
    end 
end 

UPDATE：这是我从我的控制台收到当我点击 “赞” 在博客文章链接：

Started PUT "/stories/7/like" for 96.252.66.43 at 2015-11-02 13:32:38 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 
Processing by StoriesController#upvote as JS 
    Parameters: {"id"=>"7"} 
    User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT 1 [["id", 2]] 
    Story Load (0.2ms) SELECT "stories".* FROM "stories" WHERE "stories"."id" = ? LIMIT 1 [["id", 7]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."voter_id" = ? AND "votes"."voter_type" = ? AND "votes"."vote_scope" IS NULL [["votable_id", 7], ["votable_type", "Story"], ["voter_id", 2], ["voter_type", "User"]] 
    ActsAsVotable::Vote Load (0.2ms) SELECT "votes".* FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."voter_id" = ? AND "votes"."voter_type" = ? AND "votes"."vote_scope" IS NULL ORDER BY "votes"."id" DESC LIMIT 1 [["votable_id", 7], ["votable_type", "Story"], ["voter_id", 2], ["voter_type", "User"]] 
    (0.1ms) begin transaction 
    SQL (0.6ms) UPDATE "votes" SET "vote_flag" = ?, "updated_at" = ? WHERE "votes"."id" = ? [["vote_flag", "t"], ["updated_at", "2015-11-02 13:32:38.350587"], ["id", 1]] 
    (8.9ms) commit transaction 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? [["votable_id", 7], ["votable_type", "Story"]] 
    Rendered stories/upvote.js.erb (2.4ms) 
Completed 200 OK in 186ms (Views: 3.8ms | ActiveRecord: 10.8ms) 

然后当我刷新我得到这个..我没有复制所有的GET请求，因为有大约19人

Started GET "/" for 96.252.66.43 at 2015-11-02 13:33:54 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 
Processing by StoriesController#index as HTML 
    Story Load (0.3ms) SELECT "stories".* FROM "stories" 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 6], ["votable_type", "Story"]] 
    (0.1ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 6], ["votable_type", "Story"]] 
    User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 7], ["votable_type", "Story"]] 
    (0.1ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 7], ["votable_type", "Story"]] 
    CACHE (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 8], ["votable_type", "Story"]] 
    (0.1ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 8], ["votable_type", "Story"]] 
    CACHE (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 9], ["votable_type", "Story"]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 9], ["votable_type", "Story"]] 
    CACHE (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    (0.1ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 10], ["votable_type", "Story"]] 
    (0.1ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 10], ["votable_type", "Story"]] 
    CACHE (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 't' AND "votes"."vote_scope" IS NULL [["votable_id", 11], ["votable_type", "Story"]] 
    (0.2ms) SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = 'f' AND "votes"."vote_scope" IS NULL [["votable_id", 11], ["votable_type", "Story"]] 
    CACHE (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 2]] 
    Category Load (0.2ms) SELECT "categories".* FROM "categories" 
    Rendered stories/index.html.erb within layouts/application (64.6ms) 
    User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT 1 [["id", 2]] 
    Rendered layouts/_header.html.erb (1.8ms) 
Completed 200 OK in 215ms (Views: 211.7ms | ActiveRecord: 2.8ms) 


Started GET "/assets/style.self-9116d042c0a58f16b620f2fcef2e66bc9e7bb9e1d9875291cf4c94d80f232344.css?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/application.self-b9d18442eb6f7484fafe00524db309cada26b681530b4c56554a4331e3326a18.css?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/bootstrap/affix.self-f7aef9d98ee5ece34a6a92a6a15bba777d93e8d908b75c95a85088277f394200.js?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/bootstrap/collapse.self-93820e9b486e375a7fb4477602def3a6f8381fa6d50938d5378297ffbe4a1248.js?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/bootstrap/button.self-d19f3e2bcd3a7a4d75c11b9141b3fabd2c11987da1e99c85548ec3ecf8db30c3.js?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/bootstrap/alert.self-896ab026e6823f5cef2441e07dac53d0692a5b772ac58b1ce20aa624c342d3f4.js?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 


Started GET "/assets/bootstrap/dropdown.self-30536ae4d54b2685c26b5787ed0eb549a9075717fe690cce6270873bedf2df00.js?body=1" for 96.252.66.43 at 2015-11-02 13:33:55 +0000 
Cannot render console from 96.252.66.43! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 

当我检查不喜欢按钮中的一个，我有这样的：

<a class="btn btn-success btn-xs" data-remote="true" rel="nofollow" data-method="put" href="/stories/20/dislike"> 
You Wimp! <span class="text-warning"></span></a> 

提前感谢这么多！

Answer 1

您可以使用正确的语法和流程尝试以下代码。以下更改将解决您的问题。但是你可以用更清洁的代码重新组织你的代码。 在你的控制器中：

def upvote 
    @story = Story.find(params[:id]) 
    respond_to do |format| 
    if @story.upvote_by(current_user) 
     format.html {redirect_to :back} 
     format.js { render layout: false } 
    else 
     # add your proper message to user why its not possible 
     format.html {redirect_to :back} 
     format.js { render "alert('failed to give upvote')" } 
    end 
    end 
end 

在你的upvote js文件中。删除ajax成功块。

# ensure you got the right selector. 
    #instead of escape_javascript use j 
    $('.downvote_story').parent().parent().find('.upvote_count').html('<%= j @story.votes_for.size.to_s %>'); 
    $('.downvote_story').closest('.like_story').hide(); 
    $('.downvote_story').closest('.upvotes').html(' <%= link_to "dislike", dislike_story_path(@story), remote: true, method: :get, class: 'dislike_story' %>');