2つ目のタブ内にあるリンクを押すと、1つ目のタブに遷移してしまう。

Question

前提・実現したいこと

同一ページ内(users/:id/follow)にタブを複数用意し、1つ目のタブ内にはフォローしているユーザー一覧、2つ目のタブ内にはフォロワー一覧を表示しました。フォロー機能及びタブの表示は出来上がっています。

ここでkaminariと言うgemを使用し、ユーザー数をページネーションで区切りたいです。
一旦2名毎の表示にしてテストしているのですが、タイトルにある通り遷移が上手くいきません。

具体的な状況は以下の通りです。

1. 該当のユーザーは、a, b, cと言う3人のフォロワーを持っている。users/:id/followに行くとまずは1つ目のタブ（フォロー一覧）が表示されている。
2. 2つ目のタブ（フォロワー一覧）をクリックするとa, bのみが表示されており、「1 2 Next › Last »」の表示もある為、ページネーション自体は機能している。
3. 「1 2 Next › Last »」の「2」をクリックすると、ユーザーcが表示されるかと思いきや1つ目のタブ（フォロー一覧）に遷移してしまう。
4. その後で2つ目のタブ（フォロワー一覧）をもう一度クリックすると、今度はcのみが表示されている。

該当のソースコード

users_controller.rb

def follow    
  @user = User.find_by(id: params[:id])
  @following_users = @user.followings.all.order(created_at: :desc).page(params[:page]).per(2)
  @followers_users = @user.followers.all.order(created_at: :desc).page(params[:page]).per(2)
end

users_follow.html.erb

<div class="tab-container">
  <ul class="tab-group">
    <li class="tab is-active">
        <strong id="following" class="stat">
          <%= @user.followings.count %>
        </strong>
        Following
    </li>
    <li class="tab">
        <strong id="followers" class="stat">
          <%= @user.followers.count %>
        </strong>
        Followers
    </li>
  </ul>
  <div class="panel-group">
    <div class="panel is-show">
      <%= render 'users/show_following' %>
      <div class="pagination"><%= paginate @following_users %></div>
    </div>
    <div class="panel">
      <%= render 'users/show_followers' %>
      <div class="pagination"><%= paginate @followers_users %></div>
    </div>
  </div>
</div>

users/_show_following.html.erb

<!-- 「フォロワー」の繰り返し機能も、こちらの「フォロー」の記述とほぼ同様。-->
<% @following_users.each do |user| %>
  <div class="users-follow-item">
    <div class="user-top">
      <%= link_to user_path(user) do %>
        <img src="<%= "/user_images/#{user.image_name}" %>">
      <% end %>        
    </div>
    <div class="user-bottom">
      <div class="user-follow-username"><%= link_to(user.name, "/users/#{user.id}") %></div>
    </div>
  </div>
<% end %>

tab.js

$(document).on('turbolinks:load', function() {
	jQuery(function($){
		$('.tab').click(function(){
			$('.is-active').removeClass('is-active');
			$(this).addClass('is-active');
			$('.is-show').removeClass('is-show');
			const index = $(this).index();
			$('.panel').eq(index).addClass('is-show');
		});
	});
});

試したこと

調べた結果少し似た質問は見付ける事が出来ましたが、本件とは状況も異なる為、結局どのような戦略でいけば良いのかが分からず質問させて頂きました…。

どなたかご助言を頂けますと有難いです。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3

Answer 1

いちばん簡単なのはタブの切り替えをリンクにして遷移させてしまうことです。
アクションも分離されるので、followingsとfollowersでparams[:page] が共有される問題も解決できます。

# GET /users/:id/followings
def followings
  @user = User.find_by(id: params[:id])
  @following_users = @user.followings.all.order(created_at: :desc).page(params[:page]).per(2)
end

# GET /users/:id/followers
def followers
  @user = User.find_by(id: params[:id])
  @followers_users = @user.followers.all.order(created_at: :desc).page(params[:page]).per(2)
end

他には ajax でページを書き換える方法です。
(以下は動作確認できていません)

【Rails】remote: trueでフォーム送信をAjax実装する方法とは？

この記事はformが対象ですが、リンクでも応用できるはずです。

<%= paginate @followings, params: {controller: 'users', action: 'followings', id: @user.id}, remote: true %>

<%= paginate @followers, params: {controller: 'users', action: 'followers', id: @user.id}, remote: true %>

Comments

[punchan36]

いつもご回答有難うございます！

やはり非同期での実装と言う事になるのですね。
このフォローページ以外にもタブが沢山あるページを作っておりますので、ルーティングを沢山生成するよりも、ここは非同期での実装をしていこうと思います。

非同期関連は後でまとめて実装しようと思っておりましたので、実装出来ましたら解決法を追記させて頂きます。
有難うございました！