プログラマ・アゲイン blog

還暦を過ぎたけどプログラマ復帰を目指してブログ始めました

Rails7 でデータの削除時に confirm が出ない

Ruby on Rails 7 で、アプリケーションを scaffold で作成中です。

そこで、データの削除時に confirmのメッセージが出ない事象に遭遇しました。

Rails 7 になってから、turbo が動くようになったことが原因のようです。

以前、button_to でも以下のように「削除時の確認メッセージが出ない」で遭遇していたのですが、今回は link_to で発生していたのに気が付きました。

pagain.hatenablog.com

link_to では、「Show」のページが表示されるだけだったので、そんな動作なのかと勝手に理解していましたが、ソースを見ても method: :delete を指定しており変だと思っていました。

turbo への対応として、以前 form ではオフにすることもしました。

今回 confirm のメッセージが出るように link_to に対応したのと、直ぐに忘れてしまうので button_to も併せて対応を記録しておこうと思います。

 

 

発生した環境

発生した環境の rubyrails のバージョンは、以下のものです。

C:\Windows\System32>ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x64-mingw-ucrt]

C:\Windows\System32>rails -v
Rails 7.0.3.1

 

button_to

まずは、button_to への対応についてです。

以前に参考にさせていただいたページが無くなっていたので、改めて別のページを参考にしました。

Rails7 で button_to の data-confirm の挙動が変わって data.confirm から form.data.confirm に変わってました - 好きなものだけ書く。ポジティブに。

 

修正前

事象としては、「Destroy this userid」ボタンをクリックすると、確認メッセージ「'Are you sure?'」が出ずに削除されてしまいます。

erb ソース
<%= button_to "Destroy this userid", @userid, {method: :delete, data: {confirm: 'Are you sure?'}} %>
生成された html
<form class="button_to" method="post" action="/userids/1">
<input type="hidden" name="_method" value="delete" autocomplete="off" />
<button data-confirm="Are you sure?" type="submit">Destroy this userid</button>
<input type="hidden" name="authenticity_token" value="・・・" autocomplete="off" />
</form>

 

修正後

「 data: {confirm: 」の部分を、「 form: {data: {turbo_confirm: 」に修正します。

以下のように変更することで、confirmメッセージが表示されるようになりました。

erb ソース
<%= button_to "Destroy this userid", @userid, {method: :delete, form: {data: {turbo_confirm: 'Are you sure?'}}} %>
生成された html
<form data-turbo-confirm="Are you sure?" class="button_to" method="post" action="/userids/1">
<input type="hidden" name="_method" value="delete" autocomplete="off" />
<button type="submit">Destroy this userid</button>
<input type="hidden" name="authenticity_token" value="・・・" autocomplete="off" />
</form>

 

buttonタグにあった data-confirm が、formタグの data-turbo-confirm に移動しています。

 

link_to についても、button_to と同様にならないか試してみました。

 

修正前

method: :delete を指定しているので、route.rb の設定から useridコントローラーの destroyメソッドに遷移するはずが、何故か showメソッドが呼び出されています。

Rails のコンソールで見ても、GET になっています。

erb ソース
<%= link_to 'Destroy', userid, method: :delete, data: {confirm: 'Are you sure?'} %>
生成された html
<a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/userids/1">Destroy</a>

 

修正後

button_toと同じように、「 data: {confirm: 」の部分を「 form: {data: {turbo_confirm: 」に修正しましたが、結果は変わりませんでした。

そこで、以下のページを参考にしました。

Rails7におけるdata-confirm |

以下のように変更しました。

erb ソース
<%= link_to 'Destroy', userid, data: {turbo_method: 'delete', turbo_confirm: 'Are you sure?'} %>
生成された html
<a data-turbo-method="delete" data-turbo-confirm="Are you sure?" href="/userids/1">Destroy</a>

 

confirm メッセージが出るようになり、「OK」をクリックすることで削除されました。

また、Rails のコンソールでも DELETE が開始されています。

 

以上、Ruby on Rails にっいて、また経験したことが有れば別のページに載せていきたいと思います。