2
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?

Rails/devise_アカウント情報編集ボタンが反応しない場合解決方法

Posted at

はじめに

初歩的な記述ミスが原因で起こったエラーですが、
原因を見つけためにかなり時間がかかったのでまとめます:joy:

環境

・Ruby 3.1.2
・RubyGems 3.3.7
・Bootstrap 4.6.2
・class Public::UsersController < ApplicationController作成済み
・Deviseを使用してユーザー認証機能を実装

1.発生した問題

マイページ内にある「編集する」ボタンを押して会員情報編集画面に遷移したあと、
会員情報を編集し、「編集内容を保存」を押すと、更新されない(ボタンが反応しない)ことがある。スクリーンショット 2024-03-18 010002.png
スクリーンショット 2024-03-17 212140.png

2.疑った原因

・編集フォームで入力されたデータの送信先のパスの記述が間違っている
・ルーティングの記述が間違っている
上記については特に問題はありませんでした。

3.原因と解決方法

デベロッパーツールを使って編集ページをくまなく見たところ、
以下のようにform_withメソッドの直下にあるはずのtrタグがない。
つまり、
tableタグ内にform_withメソッド書いたことが原因で起こるエラーと判明しました!

<誤った記述の場合>

スクリーンショット 2024-03-17 212305.png
スクリーンショット 2024-03-17 212058.png


HTMLの使用上、formタグは直接tableタグ、trタグ、tdタグなどの中に入れ込むことができない為、
誤ってtableタグの直下に書いてしまうと、今回のようなエラーが起こってしまいます💦

<修正した場合の記述>

以下のようにtableタグの外にform_withメソッドを書くことで本来tableタグの中に含まれるtrタグが表示され、エラーが解消されました。
スクリーンショット 2024-03-17 212436.png
スクリーンショット 2024-03-17 211728.png

4.終わりに

エラーが起こるとルーティングの設定ミスや、パスの記述ミスばかり目がいってしまい
tableタグの内側にform_withメソッドを書いているというミスになかなか気づくことが出来なかったことを反省しつつ、デベロッパーツールを使用して表示内容ごとにコードを確認してエラーを見つけることの大切さにも気づきました。
まだまだ未熟ですが、めげずに続けていこうと思います:grin::thumbsup:

2
0
2

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
2
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?