前提・実現したいこと
同一ページ内(users/:id/follow
)にタブを複数用意し、1つ目のタブ内にはフォローしているユーザー一覧、2つ目のタブ内にはフォロワー一覧を表示しました。フォロー機能及びタブの表示は出来上がっています。
ここでkaminari
と言うgem
を使用し、ユーザー数をページネーションで区切りたいです。
一旦2名毎の表示にしてテストしているのですが、タイトルにある通り遷移が上手くいきません。
具体的な状況は以下の通りです。
- 該当のユーザーは、a, b, cと言う3人のフォロワーを持っている。
users/:id/follow
に行くとまずは1つ目のタブ(フォロー一覧)が表示されている。 - 2つ目のタブ(フォロワー一覧)をクリックするとa, bのみが表示されており、「1 2 Next › Last »」の表示もある為、ページネーション自体は機能している。
- 「1 2 Next › Last »」の「2」をクリックすると、ユーザーcが表示されるかと思いきや1つ目のタブ(フォロー一覧)に遷移してしまう。
- その後で2つ目のタブ(フォロワー一覧)をもう一度クリックすると、今度はcのみが表示されている。
該当のソースコード
users_controller.rb
ruby
1def follow 2 @user = User.find_by(id: params[:id]) 3 @following_users = @user.followings.all.order(created_at: :desc).page(params[:page]).per(2) 4 @followers_users = @user.followers.all.order(created_at: :desc).page(params[:page]).per(2) 5end
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/27 06:39