Railsの検索システムに実装したページャーの挙動がおかしい

Question

お世話になります。これは以前質問したシステムの続きになります。あれから、試行錯誤の末に検索部分はAjaxを実装することができたのですが、kaminariを使ったページャーの挙動がおかしいままになっており、その原因がわからずに難航しています。

参考にしたページがこちらです
Kaminariをjsonでajax化する

#環境

• Apache2.4.38
• Ruby2.5.1
• Rails5.2.3
• Sqlite3

なお、自分はRailsに不慣れなので、erb、javascriptで記述しています。

#プログラム
##コントローラ
cities_controller

class CitiesController < ApplicationController
	protect_from_forgery :except => [:index,:get_area,:paginate]
  before_action :get_area, only: [:show, :edit, :update, :destroy]

  # GET /cities
  # GET /cities.json
  PER = 20

  def index
	  unless params[:q].blank?
			@q = City.ransack(params[:q])
			@q.sorts = 'population desc' if @q.sorts.empty?
			@cities = @q.result.page(params[:page]).per(10)
			#コンテナのレンダリング
			p_cities = render_to_string(
				partial: 'ajax_container',
				locals: { :cities => @cities}
			)
			#ページャーのレンダリング
			p_pager = render_to_string(
				partial: 'ajax_pager',
				locals: { :cities => @cities },
				remote: true
			)
			if request.xhr?
				render json:{
					container: p_cities,
					pager: p_pager
				}
			end
		else
			@q = City.ransack(params[:q])
			@q.sorts = 'population desc' if @q.sorts.empty?
			@cities = @q.result.page(params[:page]).per(10)
		end 
 end

#後略

##ルーティング

Rails.application.routes.draw do
  resources :cities
	get 'cities/index', to: 'cities#index'
	post 'cities/index' ,to: 'cities#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

##テンプレート
index.html.erb

<%- model_class = City -%>
<div class="page-header">
  <h1><%=t '.title', :default => model_class.model_name.human.pluralize.titleize %></h1>
</div>

<div class="panel panel-default" id="list">
  <div class="panel-heading">
    <div class="panel-title">検索</div>
  </div>
  <div class="panel-body">
    <%= search_form_for(@q , :id=>'city-form', :remote => true) do |f| %>
      <div class="row">
        <!-- 都道府県名の完全一致検索 -->
        <div class="col-sm-6">
          <div class="form-group">
            <%= f.label :pref_no_eq %>
            <%= f.select :pref_no_eq,Pref::PREF.to_a,{},{class:'form-control'} %>
          </div>
        </div>

        <!-- 市名の部分一致検索 -->
        <div class="col-sm-4">
          <div class="form-group">
            <%= f.label :city_name_cont %>
            <%= f.text_field :city_name_cont, class: "form-control", placeholder: "部分一致" %>
          </div>
        </div>
      </div><!-- @row -->

      <div class="row">
        <!-- 人口の範囲検索 -->
        <div class="form-group">
          <div class="col-sm-12 form-inline">
              <%= f.label :'人口の範囲検索' %>
              <%= f.search_field :population_gteq, class: "form-control", placeholder: "最低値" %>
              ～
              <%= f.search_field :population_lteq, class: "form-control", placeholder: "最高値" %>
              <%= f.submit '検索', class: "btn btn-primary btn-search", id: "sbm" %>
              <%= link_to 'クリア', url_for, class: "btn btn-default" %>
              <%= link_to t('.new', :default => t("helpers.links.new")),new_city_path,:class => 'btn btn-primary' %>
          </div>

        </div>
      </div><!-- @row -->
    <% end %>
  <div>
</div>

	<table class="table table-striped" id="tbl">
		<thead>
			<tr>
				<th><%= model_class.human_attribute_name(:id) %></th>
				<th><%= model_class.human_attribute_name(:base_no) %></th>
				<th><%= model_class.human_attribute_name(:city_name) %></th>
				<th><%= model_class.human_attribute_name(:pref_no) %></th>
				<th><%= model_class.human_attribute_name(:population) %></th>
				<th><%=t '.actions', :default => t("helpers.actions") %></th>
			</tr>
		</thead>
		<tbody id="ajax-response-wrapper">
			<%= render 'ajax_container' %>
		</tbody>
	</table>
	<div id="pager"><%= render 'ajax_pager' %></div>

<script type="text/javascript">
		$(function(){
			$(".form-control").each(function(){
				$(this).on('change focusout',function(){
					$('#sbm').click();
				})
			})
			$("#city-form").on("ajax:success",function(e){
				data = e.detail[0]
				$('#ajax-response-wrapper').empty().append(data.container)
				$('#pager').empty().append(data.pager)
			})
			$("#city-form").on("ajax:fail",function(event,data,status,xhr){
					alert("fail!")
			})
       })
</script>

##パーシャル
_ajax_container.html.erb

<% @cities.each do |city| %>
	<tr id="t">
		<td><%= link_to city.id, city_path(city) %></td>
		<td><%= city.base_no %></td>
		<td><%= city.city_name %></td>
		<td><%= city.pref_no %></td>
		<td><%= city.population %></td>
		<td>
			<%= link_to t('.show', :default => t("helpers.links.show")),
									city_path(city), :class => 'btn btn-default btn-xs' %>
			<%= link_to t('.edit', :default => t("helpers.links.edit")),
									edit_city_path(city), :class => 'btn btn-default btn-xs' %>
			<%= link_to t('.destroy', :default => t("helpers.links.destroy")),
									city_path(city),
									:method => :delete,
									:data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },
									:class => 'btn btn-xs btn-danger' %>
		</td>
	</tr>
<% end %>

_ajax_pager.html.erb

<%= paginate @cities, window: 2 %>

現行の画面

##仕様

• 検索機能はRansack、ページャー機能はkaminariを使用（前と変わらず）
• プルダウンの値変更、またはテキストボックスのフォーカスアウトによって、検索結果をAjaxで返す。Ajaxの手法として、テンプレートをパーシャル化して、レスポンスに対し、一度消去したタグを再度付与する。
• 検索結果を10件ずつ表示している
• 検索結果が10件以上となる場合は、ページャーが付与される
• 検索結果が10件以下となる場合は、ページャーは付されない

発生している問題

• ページャーの遷移がおかしく、最初に読み込んだ状態から、10件以上検索される結果を表示し、その画面のページャーから2ページめを押しても、1ページ目の表示が残ります。その状態でもう一度2ページ目を押すと、次のページに遷移します。

ところが、キャッシュの関係なのかそのバグを再現できない場合もあります。また、ページャー無しの検索結果から再びページャーありの検索結果となった場合にページ遷移を行うと、同様のバグが起こったりします。

#やってみたこと

• ページャーにremote: trueを記述してみた　→　ページャー機能のAjax自体が機能しなくなりました
• テンプレートのパーシャル部分を削除した → ページャーの遷移後に表示されなくなってしまいました

ほかにもコントローラのメソッドを通常制御とAjaxで分けてみたり、パーシャルの記述を変えてみたり色々試行錯誤してみたのですが、解決しないので皆様の助力を仰がせていただきます。

よろしくお願いします。

Comments

[m.ts10806]

回答依頼いただきましたがRuby未経験ですので期待にはお答えできません

Answer 1

自宅の環境なら問題なく動きました。どうやら、remote: trueを付け外ししたせいで、キャッシュがグチャグチャになっていたようです。