Rails : 非同期でフォローボタンを実装したい

ruby ons railsでwebアプリを作成しています
フォローボタンをajaxを用いて、非同期に処理をしたいのですがうまくいきません
自分で必死に考えて、調べてみたのですが、どこが間違っているかがわかりませんでした。
どなたかコード上で間違っている点がありましたら、ご教授お願いいたします

gemでjquery-rails はインストール済みです
devise導入済み

困っていること

フォロー済みボタンを押しても、フォローするといったボタンに非同期で変化しません
ブラウザを再読み込みすると反映されます

コード

javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

routes.rb

Rails.application.routes.draw do
  devise_for :admin_users, ActiveAdmin::Devise.config
  ActiveAdmin.routes(self)
  devise_for :users
  get 'home/index'
  get 'home/myself'  
  root to: "home#index"

  get 'search', to: 'classrooms#search'

  resources :classrooms, only: [:index, :show, :create] do
    resource :reviews, only: [:create]
    get :rate, on: :member
  end

  resources :users, only: [:index, :show] do
    resource :relationships, only: [:create, :destroy]
    get :follows, on: :member
    get :followers, on: :member
  end
  resources :clubs

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  
end

relationship.rb

class Relationship < ApplicationRecord
  belongs_to :following, class_name: 'User'
  belongs_to :follower, class_name: 'User'

  validates :following_id, presence: true
  validates :follower_id, presence: true
end

user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  mount_uploader :image, ImageUploader

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

         devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  #自分がフォローしているユーザとの関連
  has_many :active_relationships, class_name: 'Relationship', foreign_key: :following_id, dependent: :destroy
  has_many :followings, through: :active_relationships, source: :follower

  #自分がフォローされているユーザとの関連
  has_many :passive_relationships, class_name: 'Relationship', foreign_key: :follower_id, dependent: :destroy
  has_many :followers, through: :passive_relationships, source: :following

  def followed_by?(user)
    passive_relationships.find_by(following_id: user.id).present?
  end
end

relationships_controller.rb

class RelationshipsController < ApplicationController

  #フォローする
  def create
    follow = current_user.active_relationships.new(follower_id: params[:user_id])
    follow.save
    @user = User.find(params[:user_id])
  end

  #アンフォローする
  def destroy
    follower = current_user.active_relationships.find_by(follower_id: params[:user_id])
    follower.destroy
    @user = User.find(params[:user_id])
  end
end

views/users/show.html.erb

<div class="container-fluid">
  <div class="row my-5">
    <div class="col-1 offset-2">
      <!-- ユーザ画像 -->
      <% if @user.image.blank? %>
        <%= image_tag 'default.jpg', class: "icon-image" %>
      <% else %>
        <img src=<%= @user.image %> class="icon_image" >
      <% end %>
    </div>
    <!-- ユーザ詳細 -->
    <div class="col-7 mt-1 pl-5">
      <span class="user-name"><%= @user.username %></span>
      <!-- フォローボタン -->
      <% if @user.id != current_user.id %>
        <span id="follow-button_#{ @user.id }">
          <%= render 'users/follow_button', user: @user %>
        </span>
      <% end %>
      <p class="user-profile mt-2"><%= @user.profile %></p>
      <td id ="following-count_#{ @user.id }">
        <%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>
      </td>
      <td id="follower-count_#{ user.id }"> 
        <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %>
      </td>
    </div>
  </div>
</div>

views/users/_follow_button.html.erb

<% if user.followed_by?(current_user) %>
  <%= link_to 'フォロー済み', user_relationships_path(user.id), method: :delete, class: "unfollow-link d-block px-3 py-1 float-right", remote: true %>
<% else %>
  <%= link_to 'フォロー', user_relationships_path(user.id), method: :post, class: "follow-link d-block px-3 py-1 float-right", remote: true %>
<% end %>

views/relationships/create.js.erb

$("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>");
$("#follower-count_<%= @user.id %>").html(' <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %>');
$("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>');

views/relationships/destroy.js.erb

$("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>");
$("#follower-count_<%= @user.id %>").html(' <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %>');
$("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>');

本当にわからないです。。。どなたか。。。

行動規範の内容に同意します

回答3件

自分はこんな感じで書いたのでさっきの回答で無理だったら.user_<%= @user.id %>とuser_<%= @user.id %>の表記パクってみてください。

(".user_<%= @user.id %>").html("<%= j(render 'users/follow',  user: @user) %>")

<div class="user_<%= @user.id %>">
   <%= render 'users/follow', user: @user %>
</div>

投稿2020/11/14 05:06

test_user_222

総合スコア20

td classにidを付与すると自分も非同期できなかったので下記をためしてみてください。
<span>のところも<span id="follow-button_#{ @user.id }">のid消してみて無理だったら<p>に変えてみてやってください。

ruby
1<td>
2<p class="following-count_#{ @user.id }"
3<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>
4</p>
5</td>

投稿2020/11/14 04:59

編集2020/11/14 05:00

test_user_222

総合スコア20

  #フォローする
  def create
    follow = current_user.active_relationships.new(follower_id: params[:user_id])
    follow.save
    @user = User.find(params[:user_id])
  end

  #アンフォローする
  def destroy
    follower = current_user.active_relationships.find_by(follower_id: params[:user_id])
    follower.destroy
    @user = User.find(params[:user_id])
  end

これらの @user = User.find(params[:user_id])　の下に、

    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end

を追記してみてください

投稿2020/11/13 14:06

hukurouo

総合スコア108

rikuou

2020/11/13 14:09

ご回答ありがとうございます追記してみましたが、状況は変化しませんでした

hukurouo

2020/11/13 14:32 編集

む。フォローカウントなどは非同期で変更されます？

hukurouo

2020/11/13 14:23

$("#follow-button_<%= @user.id %>").html("<%= escape_javascript(render 'users/follow-button', user: @user) %>"); $("#follow-button_<%= @user.id %>").html("<%= escape_javascript(render 'users/follow-button', user: @user) %>"); これでどうでしょ

rikuou

2020/11/14 01:03

フォローカウントも非同期で変更されませんコードを変更してみましたが、やはりページをリロードしないと変化はありませんでした。。。

rikuou

2020/11/14 01:14

いくつか調べてみて,　リンクに　data: {"turbolinks" => false}　を追記すると改善すると行った記事があったので、試してみましたがうまくいきませんでした

hukurouo

2020/11/14 02:00

原因を切り分けていきましょうか。・クロームを使っていたら、デベロッパーツールのコンソールログも確認して、何かエラーが出ていないか確認してみてください。・特にエラーが出ていなかったら、そもそも create.js.erb が起動しているかを確かめるために、中身を alert("Hello"); のみにしてみましょう。

rikuou

2020/11/14 02:38

Uncaught type error メッセージが複数でてきました event-handler.self-a…1c896c.js?body=1:24 Uncaught TypeError: Cannot read property 'hasAttribute' of null at getjQuery (event-handler.self-a…1c896c.js?body=1:24) at event-handler.self-a…1c896c.js?body=1:43 at event-handler.self-a…1c896c.js?body=1:10 at event-handler.self-a…1c896c.js?body=1:11 . . 末尾行に以下のエラーメッセージも検出されました rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:217 DELETE http://localhost:3000/users/2/relationships 500 (Internal Server Error)

hukurouo

2020/11/14 02:50

htmlのDOM要素と上手く疎通できてないっぽいですねパッと見あやしいのはここらですかね $("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>'); current_user.id のところは　@user.id　？ <td id="follower-count_#{ user.id }"> user.id は　@user.id　？

行動規範の内容に同意します

あなたの回答