Rails 5.1：rails-ujsのallowActionをオーバーライドしてカスタム確認ダイアログを使用する方法

Question

jquery_ujsを使用していた5.1以前のRailsではのように、ブラウザの確認ポップアップを$.rails.allowActionに置き換えることができました（here）。

rails-ujsを使用するRails 5.1以降では、$.rails.allowActionは使用できなくなりました。どのように我々はjquery_ujsに切り替えることなく、Railsの5の自社でのRailsのデフォルトの確認を上書きすることができますか？

ありがとうございます。

Answer 1

（それは用途をrails_ujsクリックイベント、前に行く）私のイベントハンドラが最初に実行することができます。私は道に沿って見つけたものをここで読むことができます：ここでhttps://medium.com/store2be-tech/how-to-use-sweetalert2-for-your-rails-5-1-rails-ujs-confirms-without-jquery-8a5b516b2a1

最終的な解決策：

(function() { 
    var handleConfirm = function(element) { 
    if (!allowAction(this)) { 
     Rails.stopEverything(element) 
    } 
    } 

    var allowAction = function(element) { 
    if (element.getAttribute('data-confirm-swal') === null) { 
     return true 
    } 

    showConfirmationDialog(element) 
    return false 
    } 

    // Display the confirmation dialog 
    var showConfirmationDialog = function(element) { 
    var message = element.getAttribute('data-confirm-swal') 
    var text = element.getAttribute('data-text') 

    swal({ 
     title: message || 'Are you sure?', 
     text: text || '', 
     type: 'warning', 
     showCancelButton: true, 
     confirmButtonText: 'Yes', 
     cancelButtonText: 'Cancel', 
    }).then(function(result) { 
     confirmed(element, result) 
    }) 
    } 

    var confirmed = function(element, result) { 
    if (result.value) { 
     // User clicked confirm button 
     element.removeAttribute('data-confirm-swal') 
     element.click() 
    } 
    } 

    // Hook the event before the other rails events so it works togeter 
    // with `method: :delete`. 
    // See https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/start.coffee#L69 
    document.addEventListener('rails:attachBindings', function(e) { 
    Rails.delegate(document, 'a[data-confirm-swal]', 'click', handleConfirm) 
    }) 

}).call(this) 

Answer 2

私はrails_ujsに微調整する美しい方法を発見していないので、私は（CoffeeScriptの使用）この回避策として来た：

`` `

$(document).on 'mousedown', 'a[data-confirm]', (e) -> 
    e.preventDefault() 
    link = $(e.target) 

    message = link.data 'confirm' 
    modal = $('.modal.confirmation') 
    modal.find('.content').text(message) 
    approve = modal.find('.approve') 
    approve.attr('data-method', link.data('method')) 
    approve.attr('href', link.attr('href')) 

    modal.modal('show') 

` ``

MouseDownイベントは、私は同じ課題を持っていたし、私はそれにもう少し見