7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Rails7 button_toでdata: { turbo: false }でも確認ダイアログを表示させる

Last updated at Posted at 2022-06-10

やりたいこと

削除ボタンに対して、Turboは無効化し、確認ダイアログは表示させたい。
しかし、 turbo_confirmを用いた実装ではTurboが無効化されているため、確認ダイアログの表示ができない。

参照
https://qiita.com/jnchito/items/5c41a7031404c313da1f#confirm%E3%82%84disable_with%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AA%E6%A9%9F%E8%83%BD%E3%81%A8turbo%E3%81%AF%E4%B8%8D%E5%8F%AF%E5%88%86

また、GETリクエストを送るリンクであっても、Turboを無効化した上で確認ダイアログを出す、といったことはできません。なぜなら、Turboを無効化することで、turbo_confirm:オプションも無効化されるからです。

実装方針

JSを使って確認ダイアログを表示させます。

<%= button_to "削除する", reservation_path(reservation), method: :delete, data: { turbo: false }, form: { onSubmit: "return check()" } %>
function check(){
  if(window.confirm('本当に削除しますか?')){ 
    return true;
  }
  else{
    window.alert('キャンセルされました'); 
    return false; 
  }
}
7
6
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
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?