Javascript 使用ajax rails的博客上的喜欢/不喜欢按钮

在我最初尝试在类似博客的网站上制作喜欢/不喜欢按钮，并尝试使用重定向到：Back和一些锚之后，我回到了这里，但没有成功。我现在正尝试使用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 %>)

更新：这是当我点击博客帖子下的“喜欢”链接时从控制台收到的信息：

  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>

---

非常感谢

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

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' %>');

#确保选择正确。
#使用j代替escape_javascript
$（'.downvote_story'）.parent（）.parent（）.find（'.upvote_count'）.html（''）；
$（'.downvote_story'）。最近（'.like_story'）。隐藏（）；
$（'.downvote_story'）.closest（'.upvotes'）.html（“”）；

你能确定你的浏览器控制台和服务器日志吗？@Rubyrider，当我单击“喜欢”按钮时，我刚刚更新了我认为是控制台日志的内容。我不太确定如何查看服务器登录密钥。我发现了您的问题。让我想想我应该怎么写。这可能是一个愚蠢的问题，但我需要在故事控制器中使用if/else语句吗？我还没有运行它，但它给了我一个syntex错误，说它期待的是end而不是else。这就像每个帖子上的“喜欢”和“不喜欢”按钮，这样它们就不会链接到另一个页面或其他任何东西。尽管如此，它仍然不会自动更新。我仍然需要刷新页面以更新计数器。当我在右下角看到的任何故事中单击“喜欢”按钮或“不喜欢”按钮时，超链接会发生更改，因此请求似乎会通过，但在页面刷新之前不会更改。我想检查浏览器控制台。作为新的，我该如何做？

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>

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

  # 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' %>');