【问题标题】:Rails 4.1.4 Custom Confirmation AlertRails 4.1.4 自定义确认警报
【发布时间】:2016-01-14 15:46:32
【问题描述】:

我在我的应用中使用 Rails 4.1.4。我有一个 delete 方法的链接,该方法具有 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) } %>

显示的确认对话框是浏览器的默认设置。例如,如何自定义它以使用 Bootstrap 模态?

问候!!!。

【问题讨论】:

    标签: ruby-on-rails twitter-bootstrap


    【解决方案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>
                       <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)
    

    这也可以立即翻译您的确定和取消按钮,例如

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

    如果您不想总是重复此操作,请使用一些帮助程序来创建自定义“删除链接”!

    【讨论】:

    • 谢谢!。但是我没有使用coffeescript,我应该如何使用javascript?。这段代码去哪里了?感谢您的帮助!!。
    • 您可以使用coffeescript.org 上的“try coffeescript”部分将 coffeescript 转换为 javascript。您应该将生成的脚本放在 app/assets/javascript 文件夹中。您还可以将上面的脚本放在同一文件夹中的 .js.coffee 文件中。 Rails 将负责转换!
    • 你可能想$(html).modal().on 'hidden.bs.modal', -&gt; $(@).remove()data-remote="true"时清理DOM碎屑
    • 还可以考虑在$.rails.confirmed 中重命名data-confirm 值,以便可以在ajax:error 中恢复它。如果没有,您将得到一个不再确认的删除链接。
    • 谢谢!太有用了。你让我开心。
    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-12-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多