0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【rails6】formの送信をしてもページが遷移しない問題の解決

Last updated at Posted at 2021-05-07

こんにちは!

今日もアプリケーションの不具合を調べていたところ、思わぬミスを発見しましたので共有します

発生した問題

アプリのform、送信ボタン(submit)を押しても画面が遷移しない

実際に現象をご確認くださいませ

444f81624bd826c9b1db4dd11ebed536.gif

見えていませんが、
「チャットを始める」のボタンを連打しています

このコードを確認くださいませ

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 %>

0d297d12cdd68910094cba1e15f8f0b7.gif

これで解決ですね!
今まで何気なく書いたり書かなかったりしていた記述ですが、とても大事なことだと認識しました。

※このGIFにあるもう一つのミスは見逃してください、これから直します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?