7
8

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.

Rails data-confirmを使ってlink_toやform_tagでアラート表示させる方法

Last updated at Posted at 2020-05-04

####結論

link_toやform_tag と data: { confirm: "表示させたい文言" } で
簡単にアラート表示を作ることができます。


例1

= link_to "アカウント削除", user_registration_path, method: :delete, data: { confirm: "【確認】アカウントを削除してもよろしいですか?" }

アカウント削除ボタンをクリックすると、下図のように画面上部にアラート表示されます。
aade35cc41ead1b8b58adf58a20f3725.png


例2

= form_tag(delete_credit_cards_path, method: :post, data: { confirm: "【確認】クレジットカード情報を削除してよろしいですか?\n(削除後も再登録可能です)" }, id: 'charge-form',  name: "inputForm") do

削除するボタンをクリックすると、下図のように画面上部にアラート表示されます。

"【確認】クレジットカード情報を削除してよろしいですか?\n(削除後も再登録可能です)"
というように、\nを挿入することで改行させることもできます。
※改行を有効にするためにはダブルクオーテーションにした方が良いようです。

3c0d25f3c6818f14057d11018a5df21b.png

####補足
Bootstrapとgem 'data-confirm-modal'を利用して、アラートをお洒落にするやり方もあるみたいです。

####参考にさせていただいた記事
https://satoh-d.hatenablog.com/entry/2017/01/21/110000
https://fuchiaz.com/rails-gem-data-confirm-modal/

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?