【JavaScript・Rails】フォロー機能が非同期で実装できない

Question

前提・実現したいこと

今Railsで開発しているアプリで、ユーザー同士のフォロー機能を実装しています。

Twitterと同じような感じで、ユーザーのフォロワーを一覧で見られるようにし、
そのページに表示されているそれぞれのユーザーをフォローするボタンも付けています。

今実現したいことは、「フォローする」というボタンをクリックするとそのユーザーをフォローでき、
「フォロー中」と非同期で表示が変わるようにすることです。

しかし、なかなか実装できず行き詰まっているので、解決法を教えていただけますと助かります。

発生している問題・エラーメッセージ

非同期でフォローするボタンを押しても非同期で表示が変わりません。
しかしデータは正しく保存されており、リロードするとボタンの文字も正しく表示されます。

該当のソースコード

▼views/relationships/followers.html.haml(フォロワー一覧ページ)

.Follow_list
  - if @followers.empty?
    .Empty
      = image_tag "foot.jpg", width: "120px"
      %br
      = "フォロワーはいません"
  - else
    = render partial: 'follower', collection: @followers

▼views/relationships/_follower.html.haml（各フォロワーのプロフィール）

- @user = follower

.User_box
  .User_box__Text
    = link_to @user.name, user_path(@user), class: "Follow_name"
    .Follow_profile
      = simple_format(@user.profile)
  - if user_signed_in? && @user != current_user
    %div{class: "Follow-#{@user.id}"}
      = render "relationships/follow", user: @user

▼views/relationships/_follow.html.haml（フォローボタン）

- if current_user.following?(user)
  = link_to relationship_path(user.id), method: :delete, remote: true do
    .White_btn.Following
      .White_btn__Content
        = icon('fas', 'user-check')
        = 'フォロー中'
- else
  = link_to relationships_path(id: user.id), method: :post, remote: true do
    .White_btn
      .White_btn__Content
        = icon('fas', 'user-plus')
        = 'フォロー'

▼views/relationships/create.js.haml

$('Follow-#{@user.id}').html("#{j(render "follow", user: @user)}");

▼views/relationships/destroy.js.haml

$('Follow-#{@user.id}').html("#{j(render "follow", user: @user)}");

▼relationships_controller.rb

class RelationshipsController < ApplicationController
  before_action :set_user

  def followers
    @followers = @user.followers
  end

  def create
    current_user.follow(@user)
    @user.create_notification_follow!(current_user, @user)
    respond_to do |format|
      format.html {redirect_back(fallback_location: root_url)}
      format.js
    end
  end

  def destroy
    current_user.unfollow(@user)
    respond_to do |format|
      format.html {redirect_back(fallback_location: root_url)}
      format.js
    end
  end

  private
  def set_user
    @user = User.find(params[:id])
  end
end

試したこと

また、ターミナルやコンソールを確認したところ、エラーメッセージは見つかりませんでした。
ターミナルに表示されているログは以下の画像の通りです。

Answer 1

勘違いしていました。ソースはそのままで、下記のみ修正してみるとどうなりますか？

views/relationships/create.js.haml
views/relationships/destroy.js.haml

$('.Follow-#{@user.id}').html("#{j(render "follow", user: @user)}");
※どっとを入れてクラスを指定

また実行したときにブラウザの検証ツールでコンソールのエラーがないかも確認してみてください。

Comments

[kumamin]

ご回答ありがとうございます。
`format.html {redirect_back(fallback_location: root_url)}`を削除してみたのですが、状況は変わりませんでした。
また、送っていただいたサイトを参考に`redirect_back`も記述してみると、コンソールに以下のようなエラーが出てしまいました。
Uncaught ReferenceError: Turbolinks is not defined

[kumamin]

ドットが抜けていたんですね！！
おかげさまで解決しました。ありがとうございます！！

[no1knows]

お手数をおかけしました。解決して良かったです！