いつmajax + kaminari でもっと見るボタンを実装したい

前提・実現したいこと

ajax + kaminari でもっと見るボタンを実装したいです。

現在railsで都道府県・市町村の登録機能を実装しているのですが、データ量が多く市町村の一部だけを表示させて、後は「もっと見る」ボタンをクリックさせて表示させようとしています。

今回参考にさせている記事リンク内容によるとgem kaminariにより予め表示件数を指定し、そのgemのメソッドであるlink_to_next_pageを使用し、次の件数を表示する際にremote trueによりjs.erbファイルを読み込むという流れになっています。

今のところ下の画像のように表示は出来ているのですが、もっと見るボタンをクリックしても何も反応がない状態です。
もっと見るをクリックする事でターミナル画面では処理が走っている事は確認できているのですが、js.erbファイルが読み込まれていないように思えます。

何か以下の記述でおかしい箇所などあるかご教授頂けないでしょうか汗

お忙しいところ申し訳ありません。

該当のソースコード

city.rb

class City < ApplicationRecord
  belongs_to :prefecture
  has_many :masseurs, through: :business_trip_ranges
  has_many :business_trip_ranges
  paginates_per 10
end

business_trip_ranges_controller

def edit
    @prefectures = Prefecture.all
    @ranges = @current_masseur.business_trip_ranges
    @cities = City.all.page(params[:page])
end

render partial:で呼び出す部分をテンプレート化

_cities.html.erb


<%= f.collection_check_boxes :city_ids, @cities, :id, :name, include_hidden: false do |c| %>
  <ul class="city-check-box">
    <% if p.object.id == c.object.prefecture_id %>
      <div id="boxes">
        <li class="city-check-box-item"><%= c.check_box + c.text %></li>
      </div>
    <% end %>
  </ul>
<% end %>

先ほどの_cities.html.erbをedit.html.erbに書き込む。


edit.html.erb


　　　<%= form_with(model: @current_masseur, url: store_manager_business_trip_ranges_update_path(@current_masseur), method: :patch, local: true) do |f| %>
        <table class="prefecture table table-hover">
          <thead>
            <%= collection_check_boxes :prefecture, :prefecture_ids, Prefecture.all, :id, :name, include_hidden: false do |p| %>
            <tr>
              <th>
                <%= p.check_box + p.text %>
              </th>
            </tr>
          </thead>
          
          <tbody>
            <tr>
              <td class="city-check-boxes">
　　　質問の部分 → <div id="cities"><%= render partial: 'cities', locals: { f: f, p: p } %></div>
     質問の部分 → <div class="more-city-link"><%= link_to_next_page @cities, 'もっと見る', remote: true, id: 'more-cities' %></div>
              </td>
            </tr>
            <% end %>
            
          </tbody>
        </table>
        
        <div class="actions text-center">
          <h1 id="result">結果</h1>
          <%= f.submit "登録する", class: "btn btn-primary mt-5 w-50" %>
        </div>
      <% end %>

もっと見るボタンをクリックする事でedit.js.erbが読み込まれる。

edit.js.erb


$('#cities').append("<%= escape_javascript(render 'cities', object: @cities) %>");
$("#more-cities").replaceWith("<%= escape_javascript( 
link_to_next_page(@cities, 'もっと見る', remote: true, id: 'more-cities')) %>");

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

ボタンを押した直後のターミナル画面。コンソールには何も表示されていませんでした。汗

Started GET "/store_manager/masseurs/1/business_trip_ranges/edit.1?page=2" for 49.98.64.183 at 2020-07-24 06:51:57 +0000
Cannot render console from 49.98.64.183! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by StoreManager::BusinessTripRangesController#edit as 
  Parameters: {"page"=>"2", "masseur_id"=>"1"}
  Masseur Load (0.1ms)  SELECT "masseurs".* FROM "masseurs" WHERE "masseurs"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/store_manager/business_trip_ranges_controller.rb:50:in `set_masseur'
  Rendering store_manager/business_trip_ranges/edit.html.erb within layouts/store_manager
  Prefecture Load (0.2ms)  SELECT "prefectures".* FROM "prefectures"
  ↳ app/views/store_manager/business_trip_ranges/edit.html.erb:13
  City Load (0.1ms)  SELECT "cities".* FROM "cities" LIMIT ? OFFSET ?  [["LIMIT", 10], ["OFFSET", 10]]
  ↳ app/views/store_manager/business_trip_ranges/_cities.html.erb:1
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 1.9ms | Allocations: 1005)
   (0.1ms)  SELECT COUNT(*) FROM "cities"
  ↳ app/views/store_manager/business_trip_ranges/edit.html.erb:25
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
   (0.1ms)  SELECT "cities"."id" FROM "cities" INNER JOIN "business_trip_ranges" ON "cities"."id" = "business_trip_ranges"."city_id" WHERE "business_trip_ranges"."masseur_id" = ?  [["masseur_id", 1]]
  ↳ app/views/store_manager/business_trip_ranges/_cities.html.erb:5
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 2.8ms | Allocations: 1643)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/_cities.html.erb (Duration: 0.2ms | Allocations: 186)
  Rendered store_manager/business_trip_ranges/edit.html.erb within layouts/store_manager (Duration: 54.3ms | Allocations: 30370)
  Rendering layouts/application.html.erb
  Rendered layouts/application.html.erb (Duration: 0.4ms | Allocations: 193)
Completed 200 OK in 67ms (Views: 64.6ms | ActiveRecord: 0.6ms | Allocations: 41715)

ここにより詳細な情報を記載してください。

unhappychoice

2020/07/24 06:37

ボタンを押した際の、 - ブラウザの開発者ツール上のネットワークタブのレスポンス - ブラウザの開発者ツール上のコンソールになにか出ているかはどうなっているでしょうか

jyon3030

2020/07/24 06:57

お忙しい中回答ありがとうございます。確認してみましたがremote trueがによりjs.erbファイルがやはり読み込めていないのかと思います汗

unhappychoice

2020/07/24 07:01

ターミナルではなく、ブラウザの開発者ツール ( https://developers.google.com/web/tools/chrome-devtools?hl=ja ) を指していますmm

unhappychoice

2020/07/24 07:24

<div class="more-city-link"><%= link_to_next_page @cities, 'もっと見る', remote: true, id: 'more-cities' %> の部分の実際にレンダリングされたHTML はどうなっているでしょうか

jyon3030

2020/07/24 10:24 編集

返信遅れて申し訳ありません。検証ツールで実際にみたのですが何もエラーが出ていなかったです。 <div class="more-city-link"><%= link_to_next_page @cities, 'もっと見る', remote: true, id: 'more-cities' %> 上記のコードを検証ツールで見ると下記のようになっていました。 <a id="more_link" rel="next" data-remote="true" href="/store_manager/masseurs/1/business_trip_ranges/edit.1?page=2">more</a> また実際にレンダリングされたHTMLというのはもっと見るボタンを押してから表示されるはずのコードという事でしょうか？もっと見るボタンを押しても何も反応はありませんがその付近のHTMLコードをスクショで載せますね汗

unhappychoice

2020/07/24 18:08 編集

<div class="more-city-link"><%= link_to_next_page @cities, 'もっと見る', remote: true, id: 'more-cities' %></div> から <a id="more_link" rel="next" data-remote="true" href="/store_manager/masseurs/1/business_trip_ranges/edit.1?page=2">more</a> は絶対生成されないと思います、(文言がもっと見ると more で異なっている) 最新コードを掲示してくださいmm