データ削除リンクの確認プロンプトconfirmをBootStrapのモーダルに置き換える。
rails標準の確認プロンプトはかっこ悪いので、BootStrapのモーダルを使うようにカスタマイズした。data-confirm属性を持っているとこのモーダルが使われるようになった。また、data-confirm属性の内容にhtmlタグ付きの文字列をセットすることで、確認プロンプトの中身を自由にHTMLで表現できるようになった。
Rails UJSのメソッドを置き換え
Rails UJSのメソッドがJavascriptのwindow.confirm()を使っているが、自作のメソッドに置き換える。data-confirm属性が無い場合はtrueを返すだけ。data-confirm属性がある場合は、自作メソッドを呼び出す。最後にfalseを返す。
myscript.js.coffee
$.rails.allowAction = (link) -> return true unless link.attr('data-confirm') $.rails.showConfirmDialog(link) # look bellow for implementations false # always stops the action since code runs asynchronously $.rails.confirmed = (link) -> link.removeAttr('data-confirm') link.trigger('click.rails')
BootStrapのモーダルを使う自作メソッドを作る。
data-confirm属性の内容をモーダルの本文にセットする。
参考サイトとの違いは
- modalのdivにtabindex="0"を設定することで、モーダル表示中に裏のHTMLにタブ移動できないようにする。（これやらないと、画面表示はモーダルっぽいけど、タブキーでフォーカスを操作してEnterキーで実行できてしまった。なんでこうなったか原因究明できていないが、とりあえずtabindexで解決した。）
- ヘルパーでconfirm文字列を以下のようにモーダル本文を指定して使いたい。モーダルタイトルこそ「確認」などの固定で良い。なので、data-confirm属性の内容をどこに使うかを変更した。
<%=link_to "削除",@foo,method: :delete, data: {confirm: "#{foo.name}を本当に削除しますか？"} %> - モーダル上のOKボタンが実行されたときに、railsにリクエスト実行を指示するところで、イベントハンドラの登録先としてmodal()メソッドの戻値から、modal-footerの子要素OKボタンを明示。
myscript.js.coffee（続き）
$.rails.showConfirmDialog = (link) -> message = link.attr 'data-confirm' html = """ <div class="modal fade" id="confirmationDialog" tabindex="0"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>確認</h3> </div> <div class="modal-body"> <p>#{message}</p> </div> <div class="modal-footer"> <a data-dismiss="modal" class="btn">Cancel</a> <a data-dismiss="modal" class="btn btn-danger confirm">削除実行</a> </div> </div> """ $(html).modal() .children('.modal-footer').children('.confirm') .on 'click', -> $.rails.confirmed(link)
参考サイト
http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/
http://rors.org/demos/custom-confirm-in-rails
