Rails应用程序中不再更新Ajax按钮

Question

我实施了一个＆＃34;关注＆＃34; Michael Hartl的Rails教程的特色。它工作好几个月但现在突然一旦退出按钮就不再更新了。我没有收到任何Javascript错误，也没有在Rails控制台中收到任何错误。单击该按钮将成功创建/销毁＆＃34;关系＆＃34;。当我尝试再次点击按钮时，我只在Rails控制台中收到错误，因为它试图重做事务。

我预先编译了我的资产，但这绝不是问题。我一直预编译我的资产，并将应用程序推送到Heroku，按钮工作正常。我最近实现的唯一更改是添加了simple_form和haml-rails gems，以使邮箱gem工作正常。我不确定它们是否相关，但我认为这可能有助于调试。

这是如何打破的，我该如何解决？谢谢！

相关代码：

控制器：

class RelationshipsController < ApplicationController

  def create
    @user = User.find(params[:relationship][:followed_id])
    current_user.follow!(@user)
   respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow!(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end
end

按照表格

<% unless current_user == @user %>
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>

的后续

<%= form_for(current_user.relationships.build(followed_id: @user.id),
             remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
<%= f.submit "Follow", class: "btn btn-primary btn-small" %>
<% end %>

取消关注

<%= form_for(current_user.relationships.find_by_followed_id(@user),
             html: { method: :delete },
             remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-primary btn-small" %>
<% end %>

create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= @user.followers.count %>')

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.

//= require bootstrap
//= require jquery
//= require jquery-ui
//= require jquery.tokeninput
//= require_tree .

我曾经在application.js中有//= require jquery_ujs但我不得不将其删除，因为单击“关注”按钮会导致点击发生两次。删除该行解决了这个问题，但Ajax似乎不再更新按钮了，我无法弄清楚原因。

修改

Rails控制台确实显示正在接收请求。我甚至可以刷新页面，然后按钮将更新：

Started DELETE "/relationships/32" for 127.0.0.1 at 2014-01-13 21:35:37 -0500
Processing by RelationshipsController#destroy as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"---edited---", "commit"=>"Unfollow", "id"=>"32"}
  Relationship Load (0.4ms)  SELECT "relationships".* FROM "relationships" WHERE "relationships"."id" = $1 LIMIT 1  [["id", "32"]]
  User Load (0.4ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 LIMIT 1
  User Load (0.4ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 1 LIMIT 1
  Relationship Load (0.4ms)  SELECT "relationships".* FROM "relationships" WHERE "relationships"."follower_id" = 1 AND "relationships"."followed_id" = 2 LIMIT 1
   (0.1ms)  BEGIN
  SQL (0.3ms)  DELETE FROM "relationships" WHERE "relationships"."id" = $1  [["id", 32]]
   (1.5ms)  COMMIT
  Rendered users/_follow.html.erb (2.5ms)
   (0.7ms)  SELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = 2
  Rendered relationships/destroy.js.erb (6.0ms)
Completed 200 OK in 17.4ms (Views: 8.0ms | ActiveRecord: 4.2ms)

Javascript控制台在Chrome中根本不显示任何错误。

编辑2 我的网络标签：

Answer 1

如果您的create.js.erb有效（来自您的提醒），则问题将出现在您的JS上

这是您当前的create.js.erb：

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= @user.followers.count %>')

1. #follow_form是否仍然存在？
2. 你能打电话给users/unfollow吗？
3. #followers是否存在？

我认为这会成为您create.js.erb中的一个问题。您可以点击right-click - ＆gt;进行检查。 inspect element - ＆gt; network - ＆gt; request you just sent - 如果出现错误，则为红色

Answer 2

在Js控制台中查找网络标记并检查ajax请求的预览，以验证响应服务器的内容，可能是ID或类名不同

Answer 3

发现了这个问题。我错过了以下表格中的<div id="follow_form">：

<% unless current_user == @user %>
 <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
</div>

   

感谢大家的帮助！