railsでAjaxを実装したい ActionView::Template::Error

Question

やりたいこと

RailsTutorialを参考にしてフォロー機能のAjaxで実装しようとしています。
現在の状態は非同期ではフォローされないものの、ページ遷移をするわけでもなく、ページをリロードすればフォローされるというような状況です。

class User < ApplicationRecord
  mount_uploader :avatar_image, AvatarImagesUploader
  validates :nick_name, presence: true
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
  :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:twitter]
  has_many :active_relationships, class_name: "Relationship",
                                  foreign_key: "follower_id",
                                        dependent: :destroy
  has_many :passive_relationships, class_name: "Relationship",
                                  foreign_key: "followed_id",
                                  dependent: :destroy
  has_many :following, through: :active_relationships, source: :followed
  has_many :followers, through: :passive_relationships, source: :follower


  def self.from_omniauth(auth)
    find_or_create_by(provider: auth['provider'], uid: auth['uid']) do |user|
      user.provider = auth['provider']
      user.uid = auth['uid']
      user.username = auth['info']['nickname']
    end
  end

  def self.new_with_session(params, session)
    if session['devise.user_attributes']
      new(session['devise.user_attributes']) do |user|
        user.attributes = params
      end
    else
      super
    end
  end

  def follow(other_user)
    active_relationships.create(followed_id: other_user.id)
  end

  def unfollow(other_user)
    active_relationships.find_by(followed_id: other_user.id).destroy
  end

  def following?(other_user)
    following.include?(other_user)
  end
end

class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
  validates :follower_id, presence: true
  validates :followed_id, presence: true
end

class UsersController < ApplicationController
  def index
    @search = User.ransack(params[:q])
    @result = @search.result(distinct: true)
    @check = params[:q]
  end

  def show
  end

  def following
    @users = current_user.following
    render "show_follow"
  end

  def followers
    @users = current_user.followers
    render "show_follow"
  end
end

class RelationshipsController < ApplicationController
  def create
    @user = User.find(params[: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

<% @users.each do |users| %>
  <div class="d-inline-flex p-2 bd-highlight col-12 border">
    <p><%= image_tag users.avatar_image.thumb.url,:size =>'50x50' %></p>
    <p class="pl-3 col-4 d-block"><%= users.nick_name.truncate(8) %></p>
    <div class="d-flex flex-row justify-content-end">
      <% if current_user != users %> <!-- フォローフォーム開始 -->
        <div id="show_follow_form">
          <% if current_user.following?(users) %>
            <%= form_for(current_user.active_relationships.find_by(followed_id: @users.id),
            html: { method: :delete }, remote: true) do |f| %>
              <%= f.submit "フォロー中", class: "btn mt-3" %>
            <% end %>
          <% else %>
            <%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
              <div><%= hidden_field_tag :followed_id, @users.id %></div>
              <%= f.submit "フォロー", class: "btn btn-primary ml-3 mt-3" %>
            <% end %>                  <!-- フォローフォーム終了 -->
          <% end %>
        </div>
        <p><%= link_to "送る", "#", class: "btn btn-info m-3" %></p>
      <% end %>
    </div>
  </div>
<% end %>

_show_follow.html.erb

<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
  <div><%= hidden_field_tag :followed_id, @users.id %></div>
  <%= f.submit "フォロー", class: "btn btn-primary ml-3 mt-3" %>
<% end %>

_show_unfollow.html.erb

<%= form_for(current_user.active_relationships.find_by(followed_id: @users.id),
        html: { method: :delete }, remote: true) do |f| %>
  <%= f.submit "フォロー中", class: "btn mt-3" %>
<% end %>

create.js.erb

$("#show_follow_form").html("<%= escape_javascript(render('users/show_follow')) %>");
$("#index_follow_form").html("<%= escape_javascript(render('users/index_follow')) %>");

destroy.js.erb

$("#show_follow_form").html("<%= escape_javascript(render('users/show_unfollow')) %>");
$("#index_follow_form").html("<%= escape_javascript(render('users/index_unfollow')) %>");

出ているエラー

 Rendering relationships/create.js.erb
  Rendered users/_show_follow.html.erb (2.3ms)
  Rendered relationships/create.js.erb (3.7ms)
Completed 500 Internal Server Error in 64ms (ActiveRecord: 30.5ms)


  
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: <%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
    2:   <div><%= hidden_field_tag :followed_id, @users.id %></div>
    3:   <%= f.submit "フォロー", class: "btn btn-primary ml-3 mt-3" %>
    4: <% end %>
  
app/views/users/_show_follow.html.erb:2:in `block in _app_views_users__show_follow_html_erb__2645418965663559337_70272209315780'

わからないこと

「undefined method `id' for nil:NilClass」と出ていてもUsersテーブルにもRelationshipsテーブルにもidカラムがあり値はちゃんと入っているのになぜNilになるのかがわかりません。

どなたかご教授願います。。。

Answer 1

typoですね。
def create　では @user = User.find(params[:followed_id])

_show_follow.html.erb　では

<div><%= hidden_field_tag :followed_id, @users.id %></div>

@users　と　@user になってます。　@user.idにしましょう

Comments

[daaaichifu]

winterboumさん。このエラーに関しては解決できました。ありがとうございます。
ですが、まだ非同期でのフォローができなくてフォローするときもフォローを外すときもページ更新をしないと表示が切り替わりません。フォローを外したときに下記のようなエラーログが出ています
ActionView::Template::Error (First argument in form cannot contain nil or be empty):
1: <%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
2: html: { method: :delete }, remote: true) do |f| %>
3: <%= f.submit "フォロー中", class: "btn mt-3" %>
4: <% end %>
また下の方にいるユーザーをフォローしたときに、一番上にいるユーザーのボタンの表示が非同期で切り替わるという現象が起きています。私ではなにが原因かわかりません。。教えていただきたいです。。よろしくお願いいたします。

[winterboum]

@users がないか全体見なおして。
@usersが正しいのか@userが正しいのか。

[winterboum]

@users.each do |users|　の loopの中に @users の数だけ` <div id="show_follow_form">` があります。
最初のid="show_follow_form"を見つけてそこを書きなおしてますから、一番上が書き換わってます・
id はユニークに。