無限スクロールがLoading...の状態で読み込まれない

Question

ransackを利用して検索フォームを作成しました。
検索条件にcont_allを使用し、複数単語をsplitで分割しています。
この条件を入れることでkaminariで作成した無限スクロールがLoading...のまま読み込まなくなってしまいました。
page(params[:page])を記入する場所が悪いのか、パラメータの設定が悪いのか、原因がわかりません。
どなたかご教授お願い致します。
必要なコードが足りなければ教えてください

  before_action :set_search

  def set_search
    if params[:q].present?
      params[:q]['material_cont_all'] = params[:q]['material_cont_all'].split(/[\p{blank}\s]+/)
      @search = Recipe.ransack(params[:q])
      @search_recipes = @search.result.order(favorites_count: :desc).page(params[:page]).per(8)
      @sub = "検索結果"
    else
      params[:q] = { sorts: 'created_at desc'}
      @search = Recipe.ransack()
      @search_recipes = @search.result.order(created_at: :desc).page(params[:page]).per(8)
      @sub = "新着レシピ"
    end
  end

  def search_params
    params.require(:q).permit(:sorts)
  end

検索機能部分（サイドカラム）

<%= search_form_for @search, url: search_recipes_path do |f| %>
      <div>
        フリーワード検索
        <%= f.text_field :title_or_body_cont_any, placeholder:  "\uf002 料理・食材など", class: 'fa' %>
      </div>
      <div>
        料理名
        <%= f.text_field :title_cont_any, placeholder: "\uf002", class: 'fa' %>
      </div>
      <div>
        材料
        <%= f.text_field :material_cont_all, placeholder: "\uf002", class: 'fa' %>
      </div>
      <div>
        <%= f.submit '検索', class: "button is-danger is-rounded is-small mt-1" %>
      </div>
      <div>
        表示順
        <%= search_form_for @search, url: search_recipes_path, html: {method: :post} do |f| %>
          <%= f.select( :sorts, { '選択してください': 'id desc', '人気順': 'favorites_count desc', '新着順': 'created_at desc', 'コメントの多い順': 'coment_count desc', '評価が高い順': 'star_count desc'}, {selected: params[:q][:sorts]}, {onchange: 'this.form.submit()'} ) %>
        <% end %>
      </div>
      <% end %>

メインカラム（ページネーション）

<div class="recipe-list jscroll">
  <div class="columns is-multiline">
    <% search_recipes.each do |recipe| %>
      <div class="column is-3">
        <div class="card">
          <div class="card-image">
           ～中略～
          </div>
        </div>
      </div>
    <% end %>
    <%= paginate search_recipes %>
  </div>
</div>

サイドカラムとメインカラムをパーシャルで記載

<section class="section">
  <div class="container">
    <div class="columns is-centered">

      <%= render 'recipes/サイドカラム', search_recipes: @search_recipes %>
　　　　～中略～      
      <%= render 'recipes/メインカラム', search_recipes: @search_recipes %>

      </div>
    </div>
  </div>
</section>

$(function() {
  $('.jscroll').jscroll({
    contentSelector: '.recipe-list',
    nextSelector: 'span.next:last a'
  });
});

Comments

[kuma_kuma_]

質問者様
このコードだけですと単純に「jscroll」が読み込まれていないようですが...
あと「jQuery」も必要です。
https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7

[baby_wing]

返答ありがとうございます。
jQueryですが、htmlの`head`部分に以下を入れてあります。
`<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>`

Controllerの
`params[:q]['material_cont_all'] = params[:q]['material_cont_all'].split(/[\p{blank}\s]+/)`
をコメントアウトすると無限スクロール機能は動きます

[kuma_kuma_]

すみませんスライダーはどこに設置されていますか？

[baby_wing]

上記のHTMLは固定のサイドカラムで、スライダーはメインカラムに設置しています。
パーシャルを使用しており、全コードを記載すると長くなるため、質問を編集してコードを追記します

[kuma_kuma_]

多分なんですがメインカラムで書かれている位置
'material_cont_all'で書き換えている内容とかぶさっていませんか？
確認はブラウザ上で確認されたほうが早いかもしれません。

[baby_wing]

コンソールを確認したところ、
`NoMethodError (undefined method `split' for nil:NilClass)`
と記載されていたので、まずこちらに対応してみようと思います。
わかりづらい説明に答えていただき、ありがとうございます。

Answer 1

ご指摘いただいたとおり、メインカラムとmaterial_cont_allの書き換え部分が重なっていたようです。
Controllerに

if params[:q]['material_cont_all'] != nil
  params[:q]['material_cont_all'] = params[:q]['material_cont_all'].split(/[\p{blank}\s]+/)
end

を追加することで解決しました。わかりづらい質問に回答いただきありがとうございました。