喜欢/不喜欢博客w / ajax rails上的按钮

时间：2015-11-02 03:48:52

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-4

回到这里之后，我尝试在类似博客的网站上制作喜欢/不喜欢的按钮，并试图使用重定向：返回和一些锚点，但这不起作用。我正在尝试使用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

更新：当我点击＆＃34;喜欢＆＃34;这是我从控制台收到的内容。博客文章链接：

  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>

提前非常感谢！

1 个答案:

答案 0 :(得分：0)

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

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' %>');
相关问题
最新问题