【Ruby On Rails】検索結果を踏まえた表示件数切り替え機能を実装したい

Question

一覧ページで検索機能と表示件数切替機能を実装したのですが、
現在の状態だと検索を行った後に表示切替を行うと、検索結果がリセットされてしまいます。

検索の結果を保持したままで表示切替を行うにはどうすればいいのかを知りたいです。

#controller

  def index
    @area = Area.find_by(id: @q.area_id_eq)
    products = @q.result(distinct: true).enable_products.order( created_at: :desc )
    @product_cnts = products.count
    @products = products.page(params[:page]).per(9)
    @page = 9
  end

<!-- index.html.erb -->

<div class ="search_zone" >
  <%= search_form_for @q, url: products_path do |f| %>
    <%= f.search_field :name_or_address_or_station_or_area_id_cont %>
    <%= f.submit "さがす", class: "searchbtn" %>
  <% end %>
</div>

<div id="products-box">
  <%= render :partial => "numberdisplay", :locals => { action: "/products/index/"} %>   <!-- 表示件数切り替え -->
  <h2>画像一覧：<%= @product_cnts %></span>&nbsp;件</h2>
    <%= link_to product_path(id: product.id) do %>
      <%= render :partial => "productbox", :locals => { img_class: "", product: product, building_name_class: "", current_mosaic: ""} %>
    <% end %>
  <%= paginate(@products) %>
</div>

上のindex.html.erb内search_zoneで検索した結果を保持した上で表示件数切替を行いたいのですが、
現状では表示件数切替を行うと、検索結果がリセットされてしまいます。

パーシャルのnumberdisplayは以下です。

<!-- _numberdisplay.html.erb -->

<form action=<%= action %> method="get" id="number-display-form" class="number-display-form">
  <p>表示件数：</p>
  <select id="number" class="number" required>
    <option value="" disabled="disabled" selected>
      選択してください
    </option>
    <option value="9">9件</option>
    <option value="27">27件</option>
    <option value="54">54件</option>
  </select>
  <input type='submit' value='切替'>
</form>

#common.js

  window.addEventListener('DOMContentLoaded', function(e){
    document.querySelector('#number-display-form').addEventListener('submit',function(e){
      var t=e.target;
      e.preventDefault();
      var url=t.getAttribute('action')+t.querySelector('select').value;
      location.href=url;
    });
  });

ここから別のコントローラに行って先程のindex.html.erbをrenderします。

routes.rb
get 'products/index/:per' => 'products#index_page', as: 'products_index_page'

  def index_page
    @page = params[:per]
    products = @q.result(distinct: true).enable_products.order( created_at: :desc )
    @product_cnts = products.count
    @products = products.page(params[:page]).per(params[:per])
    @area = Area.find_by(id: @q.area_id_eq)
    @areas = Area.all
    render("index")
  end

長くなってしまって大変申し訳ありません。
この流れの中で、どのように検索結果を渡せばよいのでしょうか？

なにかご教示していただけることがあれば、何卒よろしくお願いいたします。

Answer 1

'切替'によるsubmit時には検索パラメーター（:name_or_address_or_station_or_area_id_cont）が渡されていないためと思います。

'切替'も'さがす'と同じリクエスト先になりますよね？
ですから、formは一つでいいかと思います。イメージは以下

<!-- _numberdisplay.html.erb -->
<p>表示件数：</p>
<%= f.select :per_page, [['9件', 9], ['27件', 27], ['54', 54件]], selected: 9 %>
<%= f.submit '切替' %>

<!-- index.html.erb -->
<!-- search_formでpartialも囲うことで、partialからのsubmitを可能にします -->
<%= search_form_for @q, url: products_path do |f| %>
  <div class ="search_zone" >
    <%= f.search_field :name_or_address_or_station_or_area_id_cont %>
    <%= f.submit "さがす", class: "searchbtn" %>

    <!-- partialはこちらに、レイアウトの問題があればcssで調整が良いかと -->
    <%= render :partial => "numberdisplay", :locals => { f: f} %>
  </div>
<% end %>

<div id="products-box">
  <h2>画像一覧：<span><%= @product_cnts %></span>&nbsp;件</h2>
  <%= link_to product_path(id: product.id) do %>
    <%= render :partial => "productbox", :locals => { img_class: "", product: product, building_name_class: "", current_mosaic: ""} %>
  <% end %>
  <%= paginate(@products) %>
</div>

また、いくつか蛇足ですが。

• おそらく、ransackですよね？その辺の情報も書いてあると、回答しやすいですね。
• numberdisplayはpartial化しなくても良いんじゃないかと思います。他で使わなければね。
• controllerの情報が不足してそうですね（@qってなにとか。before_actionとかでセットしてるんじゃないかな？）。フルで貼れれば、そのほうがいいと思いますよ。
• 表示件数をper_pageパラメーターで渡してますが、これをcontroller側で読み取って処理する必要があります。わからなかったらまた聞いてください。
• javascriptによる送信ロジックはカスタマイズしすぎな気がします。（今回は不要なんじゃないかと思いますが）。ここまでやると、完全にrailを踏み外しているパターンですね。Ajaxをしたいならこのあたり読んでみましょう。
• 好みによりますが、生のhtmlタグとrailsのhelperで生成されるタグとが入り乱れてて読みづらいですね（たとえばf.submitとinput type = submitタグとか）。可読性のためにもhelper側に統一したほうがいいと思います。

---

<追記>
以下コメントを受けての追記です。
formを検索フォームとまったく別にするパターンになります

<!-- index.html.erb -->
<%= search_form_for @q, url: products_path do |f| %>
  <div class ="search_zone" >
    <%= f.search_field :name_or_address_or_station_or_area_id_cont %>
    <%= f.submit "さがす", class: "searchbtn" %>  
  </div>
<% end %>

<div id="products-box">
  <!-- partialにqを渡すことで、partialからのsubmitを可能にします -->
  <%= render :partial => "numberdisplay", :locals => { q: @q } %>
  <h2>画像一覧：<span><%= @product_cnts %></span>&nbsp;件</h2>
  <%= link_to product_path(id: product.id) do %>
    <%= render :partial => "productbox", :locals => { img_class: "", product: product, building_name_class: "", current_mosaic: ""} %>
  <% end %>
  <%= paginate(@products) %>
</div>

<!-- _numberdisplay.html.erb -->
<%= search_form_for q, url: products_path do |f| %>
  <p>表示件数：</p>
  <!-- hiddenでパラメーターをセット -->
  <%= f.hidden_field :name_or_address_or_station_or_area_id_cont %>
  <%= f.select :per_page, [['9件', 9], ['27件', 27], ['54', 54件]], selected: 9 %>
  <%= f.submit '切替' %>
<% end %>

Comments

[s_diff]

返信が遅くなってしまい申し訳ありません。
ご丁寧な回答、ありがとうございます！
おっしゃる通りにすると、簡単におもったような実装ができました。

ただ、一つ問題がでてきました。
name_or_address_or_station_or_area_id_contのsearch_formをヘッダーに入れているので、
一覧ページで表示させる表示切替のコードをsearch_formの中に入れることができません。

ヘッダーに無理やり入れても表示させることはできるのですが、
当たり前ですが一覧ページ以外でも表示件数切替が表示されてしまいます。

[s_diff]

またまた説明不足で大変申し訳ないのですが、
この場合なにか対処法があるのでしょうか？

[h_daido]

基本的には、products_pathに対して必要なパラメーターを渡してあげればちゃんと動くはずです。
そのためには、
a. １つのフォームにまとめてしまう
b. 各フォームにちゃんとパラメーターをセットしてあげる
のどちらかの実装になります。

最初に提案したのはa.のパターンですね。

レイアウトが分割されることが多いのであれば、b.のパターンでも良いかもしれません。
回答を更新したのでみてもらえればと思います。
（検証する環境がすぐに用意できないので動作確認してないです。。たぶん動くとはおもいますが...。）

[s_diff]

お忙しい中、返信ありがとうございます。

追記の通り実装しましたが、コントローラ内のコードがうまくできてないせいなのか、
検索フォームで検索した後に表示件数を切り替えると、検索したワードがリセットされてしまうようになりました。

def index
　@area = Area.find_by(id: @q.area_id_eq)
　products = @q.result(distinct: true).enable_products.order( created_at: :desc )
　 @product_cnts = products.count
　 @products = products.page(params[:page]).per(9)

　 p "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
　 p params[:q]
　 p "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

end

コントローラに通らなくなったので
上のようにとりあえずper(9)にもどしてrailsサーバーのログを見たところ、
検索したときには、{"building_name_or_address_or_station_or_area_id_cont"=>"福岡県福岡市中央区"}
表示件数を切り替えたときには、{"per_page"=>"27"}
のように返されます。
片方を変えてももう片方が保持されたままにするにはどうしたら良いのでしょうか？

[h_daido]

すいません、一番重要なのをわすれてました。
パーシャル側のソースを変更したのでみてみてください。
（例のとおり動作確認してないので、書き方とか微妙にちがうかもしれないです。）

要するにやりたいこととしては、パーシャル側からのsubmitでも"name_or_address_or_station_or_area_id_cont"パラメーターを渡してあげることです。

[h_daido]

ただ、これ書いたあとに思ったのですが、
fieldsetタグを使ったほうが楽かもしれません。
http://master-html5.blogspot.com/2011/07/formform.html

[s_diff]

f.hiddenでパラメータを渡したところうまくできました。
fieldsetとformを使う方法もとても便利ですね。これから使っていきたいと思います。

以下のような実装で、検索結果を保持した表示切り替え機能が完成しました。

#コントローラ
def index
@area = Area.find_by(id: @q.area_id_eq)
products = @q.result(distinct: true).order( created_at: :desc )
@products = products.page(params[:page]).per(params[:q][:per_page])
end

#ビュー
<div id="products-box">
<!-- partialにqを渡すことで、partialからのsubmitを可能にする -->
<%= render :partial => "numberdisplay", :locals => { q: @q } %>
　<h2>画像一覧：<span><%= @product_cnts %></span>&nbsp;件</h2>
<%= link_to product_path(id: product.id) do %>
<%= render :partial => "productbox", :locals => { img_class: "", product: product, building_name_class: "", current_mosaic: ""} %>
<% end %>
</div>

#_numberdisplay
<%= search_form_for q, url: products_path do |f| %>
<p>表示件数：<%= @per_page.present? ? @per_page : "9" %></p>
<!-- hiddenでパラメーターをセット -->
<%= f.hidden_field :building_name_or_address_or_station_or_area_id_cont %>
<%= f.hidden_field :area_id_eq %>
<%= f.select :per_page, [['9件', 9], ['27件', 27], ['54件', 54]], selected: 9 %>
<%= f.submit '切替' %>
<% end %>

最後までご丁寧に教えていただき、本当にありがとうございました！
おかげさまで開発がとてもはかどり、勉強になりました。
今後とも宜しくお願いいたします。

[h_daido]

ナイストライですね！
微力ですが、お役に立てたらならなによりです<^^>