こんにちは!
今日もアプリケーションの不具合を調べていたところ、思わぬミスを発見しましたので共有します
発生した問題
アプリのform、送信ボタン(submit)を押しても画面が遷移しない
実際に現象をご確認くださいませ
見えていませんが、
「チャットを始める」のボタンを連打しています
このコードを確認くださいませ
show.html.erb
<%= form_with model: @room do |f| %>
<%= fields_for @entry do |e| %>
<%= e.hidden_field :user_id, value: @user.id %>
<% end %>
<%= f.submit "チャットを始める", class:"mini-send-btn user-show-chat" %>
<% end %>
問題はこの箇所です
<%= form_with model: @room do |f| %>
実は、form_withにはturbolinksが関わっているそうです
私は諸々の事情でturbolinksを解除しておりますので、これでは画面遷移ができないのも納得ですね。
解決方法
解決法は下記2つあります
①turbolinksをオンにする
app/javascript/packs/application.js
require("turbolinks") // 初期設定ではONになってますが、ご確認ください
②このフォームでAjax通信を使用しない(local: trueを追記します)
show.html.erb
<%= form_with model: @room, local: true do |f| %> # local: trueを追記します
では、これでやってみましょう!
私は②の方法でやっていきますね
まずは先ほどのコードを直します
show.html.erb
<%= form_with model: @room, local: true do |f| %>
<%= fields_for @entry do |e| %>
<%= e.hidden_field :user_id, value: @user.id %>
<% end %>
<%= f.submit "チャットを始める", class:"mini-send-btn user-show-chat" %>
<% end %>
これで解決ですね!
今まで何気なく書いたり書かなかったりしていた記述ですが、とても大事なことだと認識しました。
※このGIFにあるもう一つのミスは見逃してください、これから直します