🙆

Railsの検索機能の非同期通信化についての注意点

2023/07/13に公開

Railsにて検索機能の非同期通信化を行っていた際にはまってしまった事象について記録しておきます。

現象としては、
・検索機能の非同期通信化ができない。
・検索機能自体は問題なく機能している。
・同じページのページネーションは非同期通信ができている。
下が問題のコード。

<%= form_with(url: campsite_path(@campsite), method: :get, data: {remote: true, type: "script"}) do |f| %>
  <span class="font-weight-bold h4">季節</span>
  <%= f.collection_select :season_id, @seasons, :id, :season_name, { prompt: '選択' }, class: "form-control-sm", style:"width: 100px;" %>
  <span class="font-weight-bold ml-3 h4">タグ</span>
  <%= f.text_field :content, class:"form-control-sm align-middle text-center", style:"width: 100px;" %>
  <%= f.hidden_field :method, :value => "perfect" %>
  <%= f.submit 'レビュー検索', class: "btn btn-primary" %>
<% end %>

一見問題ないように見えるが、問題となったのはこの「:method」の部分。

<%= f.hidden_field :method, :value => "perfect" %>

この「:method」は一行目のコードの

<%= form_with(url: campsite_path(@campsite), method: :get, data: {remote: true, type: "script"}) do |f| %>

にも使われており、基本的にこの一行目で使われる単語は別の場所で使うと挙動がおかしくなるとの事。
最終的なコードはこちら。

<%= form_with(url: campsite_path(@campsite), method: :get, data: {remote: true, type: "script"}) do |f| %>
  <span class="font-weight-bold h4">季節</span>
  <%= f.collection_select :season_id, @seasons, :id, :season_name, { prompt: '選択' }, class: "form-control-sm", style:"width: 100px;" %>
  <span class="font-weight-bold ml-3 h4">タグ</span>
  <%= f.text_field :content, class:"form-control-sm align-middle text-center", style:"width: 100px;" %>
  <%= f.hidden_field :search_method, :value => "perfect" %>
  <%= f.submit 'レビュー検索', class: "btn btn-primary" %>
<% end %>

ここの部分を別の名前に変えたら問題なく非同期通信化できました。
エラーも出ず、この部分だけが非同期化できなくてかなり長時間かかりました。

Discussion