AJAX 按钮处理，不会改变

Question

我发现很多人都有同样的问题，但没有一个解决方案适用于我的情况。我关注Michael Hartl's tutorial here。我按照第 14 章设置了一个跟随系统（我使用的是本书的最新版本，因为我使用的是 Rails 5.1）。数据库中的关注/取消关注按钮处理，但我必须手动刷新页面才能看到按钮和关注计数变化。

我在浏览器控制台日志中得到了这个：

POST  500 (Internal Server Error)
    jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:10255 
    send @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:10255
    ajax @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:9739
    ajax @ jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js:94
    handleRemote @ jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js:179
    (anonymous) @ jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js:512
    dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:5227
    elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:4879

relationships_controller.rb：

class RelationshipsController < ApplicationController
  before_action :authenticate_user!

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

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

视图/用户/_follow.html.erb：

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

views/users/_unfollow.html.erb

<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
                   html: { method: :delete }, remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn" %>
<% end %>

视图/用户/_follow_form.html.erb

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

relationships/create.js.erb

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

relationships/destroy.js.erb

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

users_controller.rb

class UsersController < ApplicationController
  before_action :authenticate_user!, only: [:index, :edit, :update, :destroy,
                                        :following, :followers]

  def index
    @page_title = "Forge Users"
    @users = User.all
  end

  def show
    @user = User.find(params[:id])
    @posts = Post.all
  end

  def following
    @title = "Following"
    @user  = User.find(params[:id])
    @users = @user.following
    render 'show_follow'
  end

  def followers
    @title = "Followers"
    @user  = User.find(params[:id])
    @users = @user.followers
    render 'show_follow'
  end

end

我做错了什么？

Answer 1

您需要将 Javascript 文件重命名为以 .erb 结尾。

relationships/create.js.erb 和 relationships/destroy.js.erb。这是因为文件中有 Ruby，所以它必须在 Ruby 被解释为 Javascript 并返回之前对其进行处理。

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#a-simple-example

Answer 2

你设置了局部变量user

def create
  user = User.find(params[:followed_id])

但在 .js.erb 模板中引用类实例变量 @user。

$("#followers").html('<%= @user.followers.count %>');

改为设置@user = User.find(params[:followed_id])，使其可用于视图。实际上，我认为您正在尝试设置@user = current_user。这可能更有意义。