Javascript Rails 5.1：如何使用Rails ujs覆盖带有引导的确认对话框

在Rails 5.1之前，我能够使用以下工具使用引导样式自定义确认对话框：

$ ->
  $.rails.allowAction = (link) ->
    return true unless link.attr('data-confirm')
    $.rails.showConfirmDialog(link) 
    false 

  $.rails.confirmed = (link) ->
    link.removeAttr('data-confirm')
    link.trigger('click.rails')

  $.rails.showConfirmDialog = (link) ->
    message = link.attr 'data-confirm'
    html = """
           <div class="modal" id='confirmationDialog'>
             <div class="modal-dialog">
               <div class='modal-content'>
                 <div class='modal-header'>
                   <a class='close' data-dismiss='modal'>×</a>
                   <h3>#{message}</h3>
                 </div>
                 <div class='modal-body'>
                   <p>#{link.data('body')}</p>
                 </div>
                 <div class='modal-footer'>
                   <a data-dismiss='modal' class='btn btn-default'>#{link.data('cancel')}</a>
                   <a data-dismiss='modal' class='btn btn-danger confirm'>#{link.data('ok')}</a>
                 </div>
               </div>
             </div>
           </div>
           """
    $(html).modal()
    $('#confirmationDialog .confirm').on 'click', -> $.rails.confirmed(link)

代码停止了对rails_ujs的更改？我看过一些关于为SweetAlert2定制它的文章，但没有介绍引导或其他定制选项

---

谢谢。

在Rails 5.2中获得了以下工作。首先使用控制台验证“Rails”和“BootstrapDialog”对象的存在，然后将以下内容放入类似于~/app/javascripts/prj.js的文件中：

"use strict"
$(document).ready(function(){ 

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

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

    showConfirmDialog(element);
    return false
  }

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

  var showConfirmDialog = function(link) {
    BootstrapDialog.show({
    type: BootstrapDialog.TYPE_DANGER,
    title: 'Are you sure?',
    closable: false,
    message: $(link).attr('data-confirm'),
    buttons: [
      { 
        label: 'Cancel',
        action: function(dialogRef){
          dialogRef.close();
        }
      },
      {
        label: 'Yes',
        cssClass: 'btn-danger',
        action: function(dialogRef) {
          confirmed(link);
        }
      }
    ]
  });

  $("a[data-confirm]").on('click',handleConfirm);
});

---

在Rails 5.2中获得以下工作。首先使用控制台验证“Rails”和“BootstrapDialog”对象的存在，然后将以下内容放入类似于~/app/javascripts/prj.js的文件中：

"use strict"
$(document).ready(function(){ 

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

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

    showConfirmDialog(element);
    return false
  }

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

  var showConfirmDialog = function(link) {
    BootstrapDialog.show({
    type: BootstrapDialog.TYPE_DANGER,
    title: 'Are you sure?',
    closable: false,
    message: $(link).attr('data-confirm'),
    buttons: [
      { 
        label: 'Cancel',
        action: function(dialogRef){
          dialogRef.close();
        }
      },
      {
        label: 'Yes',
        cssClass: 'btn-danger',
        action: function(dialogRef) {
          confirmed(link);
        }
      }
    ]
  });

  $("a[data-confirm]").on('click',handleConfirm);
});

---

请注意，在Rails 6中，Rails UJS的确认方法已公开，以便您可以覆盖它，如本PR中所述：

请注意，在Rails 6中，Rails UJS的确认方法已公开，以便您可以覆盖它，如本PR中所述：

对于Rails 6，以下是使用引导4对话框的示例：

将模态对话框HTML添加到基本布局：

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <span id="modal-content"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"><i class="fa fa-times-circle"></i> Cancel</button>
        <button type="button" class="btn btn-sm btn-primary" id='ok-button'><i class="fa fa-check"></i> Continue</button>
      </div>
    </div>
  </div>
</div>

单击需要确认的链接/按钮时，“模式内容”范围将替换为消息文本，然后显示对话框

---

$element是原始元素，如果用户单击对话框中的“确定”按钮，该元素将被“单击”。这意味着，无论rails链接/按钮使用POST/gets/params等多么复杂，只要单击它就可以了。

对于rails 6，下面是使用bootstrap 4对话框的示例：

将模态对话框HTML添加到基本布局：

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <span id="modal-content"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"><i class="fa fa-times-circle"></i> Cancel</button>
        <button type="button" class="btn btn-sm btn-primary" id='ok-button'><i class="fa fa-check"></i> Continue</button>
      </div>
    </div>
  </div>
</div>

单击需要确认的链接/按钮时，“模式内容”范围将替换为消息文本，然后显示对话框

$element是原始元素，如果用户单击对话框中的“确定”按钮，该元素将被“单击”。这意味着，无论rails链接/按钮使用POST/gets/params等多么复杂，只要单击它就可以了。

下面的答案，我使用Sweet Alert对其进行了调整：

自定义确认对话框.js

从“@Rails/ujs”导入Rails； 从“sweetalert2”进口棉签； Rails.confirm=消息，元素=>{ console.log'message:'，message 喷火{ titleText:“…”， 案文：'。。。， showCancelButton:true， cancelButtonText:“…”， confirmButtonText:“…”， 图标：“警告” }.thenresult=>{ ifresult.isconfirm{ const old=Rails.confirm； Rails.confirm==>true； 元素。单击； Rails.confirm=old； } }.catcherror=>{ console.logerror； }; 返回false； } application.js

工作正常：

以下是我的答案，我使用Sweet Alert对其进行了调整：

自定义确认对话框.js

从“@Rails/ujs”导入Rails； 从“sweetalert2”进口棉签； Rails.confirm=消息，元素=>{ console.log'message:'，message 喷火{ titleText:“…”， 案文：'。。。， showCancelButton:true， cancelButtonText:“…”， confirmButtonText:“…”， 图标：“警告” }.thenresult=>{ ifresult.isconfirm{ const old=Rails.confirm； Rails.confirm==>true； 元素。单击； Rails.confirm=old； } }.catcherror=>{ console.logerror； }; 返回false； } application.js

---

工作正常：

jquery不再与rails绑定，您是否尝试过将jquery-ujs包含到Gemfile中？我听说过，但还没有尝试过，但如果有rails\u-ujs abd-jqueryUjs，事件将被处理两次，然后找到一个可以做到这一点的gem，gem'data-confirm-modal'jquery不再与rails绑定，你试过将jquery ujs包含到Gemfile中吗？我听说过，但还没有试过，但如果有rails_ujs abd jqueryUjs，事件将被处理两次，然后找到一个可以做到这一点的gem，gem“data-confirm-modal”无法实现这一点，但很可能我的js技能fault@Steve您是否能够在控制台中验证Rails和BootstrapDialog对象的存在？如果是，您是否能够从控制台调用BootstrapDialog.show方法来显示对话框？无法使其工作，但可能是我的js技能fault@Steve您是否能够在控制台中验证Rails和BootstrapDialog对象的存在？如果是，您是否能够从控制台调用BootstrapDialog.show方法来显示对话框？