简体   繁体   English

Rails 4.1.4自定义确认警报

[英]Rails 4.1.4 Custom Confirmation Alert

I'm using Rails 4.1.4 in my app. 我在我的应用程序中使用Rails 4.1.4 I have a link to a delete method which has the data-confirm attribute so a confirmation dialog appears before continuing with the action. 我有一个删除方法的链接,该方法具有data-confirm属性,因此在继续操作之前会出现一个确认对话框。

<%= link_to t(:delete_account), delete_account_path, method: :delete, class: "btn btn-danger btn-sm", data: { confirm: t(:delete_account_confirmation_text) } %>

The confirmation dialog that appears is the browser's default. 出现的确认对话框是浏览器的默认值。 How can I customize this to use Bootstrap modal for example?. 我如何自定义这个以使用Bootstrap模式?

Regards!!!. 问候!!!。

Using some custom coffeescript, like: 使用一些自定义coffeescript,如:

$ ->
  $.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>
                   <h1>#{message}</h1>
                 </div>
                 <div class="modal-footer">
                   <a data-dismiss="modal" class="btn">#{link.data('cancel')}</a>
                   <a data-dismiss="modal" class="btn btn-primary confirm">#{link.data('ok')}</a>
                 </div>
               </div>
             </div>
           </div>
           """
    $(html).modal()
    $('#confirmationDialog .confirm').on 'click', -> $.rails.confirmed(link)

This also immediately allows to translate your ok and cancel buttons, like 这也可以立即翻译你的确定和取消按钮,比如

data: { confirm: t('messages.confirm_delete'), ok: t('buttons.ok'), cancel: t('buttons.cancel')

If you don't always want to repeat this, use some helper to create a custom "delete link"! 如果您不想总是重复此操作,请使用一些帮助程序来创建自定义“删除链接”!

您可以尝试使用gem(data-confirm-modal)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM