Rails 6 Bootstrap 4 Modal在提交时未关闭

Posted 2023-02-15

【中文标题】Rails 6 Bootstrap 4 Modal在提交时未关闭

【英文标题】：Rails 6 Bootstrap 4 Modal not closing on submit

【发布时间】：2021-05-31 05:28:35

【问题描述】：

Open Modal 工作正常，但不是 close modal。 这是我的文件：

在client.haml（客户端布局）

= link_to t('.mail to admin'), blame_path(@admin), remote: true  

routes.rb

get  "blame/:admin",     to: 'pages#blame', as: 'blame'

blame.js.erb

$('#blamepoint').html("<%= j(render 'blame') %>");
$('#blame').modal('toggle');

_blame.haml

.modal#blame.fade.hidetabindex: "-1"
  = form_with(url: admin_notify_path(@admin), method: "get", id: 'blameform') do
    .modal-dialog
      .modal-content
        .modal-header
          %h5.modal-title Send a message to vote admin
          %button.close"aria-label" => "Close", "data-dismiss" => "modal", type: "button"
            %span"aria-hidden" => "true" ×
        .modal-body
          .form-group
            = label_tag :message
            = text_field_tag :message, '', class: 'form-control'
            %small.form-text.text-muted This text will not be published.
        .modal-footer
          %button.btn.btn-secondary"data-dismiss" => "modal", type: "button" Close
          = submit_tag 'Send to admin', id: 'foo', class: 'btn btn-primary', 'data-toggle' => 'modal'

Javascript

$(document).on("click", '#foo', function(event)  
  console.log("link clicked");
  $('#blame').modal('toggle');
);

console.log("link clicked"); 正在工作，文本出现在控制台中。

我已经考虑过的一些资源： bootstrap modal popup not closing [https://***.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content][2] [https://***.com/questions/52797328/rails-bootstrap-modal-not-closing][3]

【参考方案1】：

经过漫长的搜索，反复试验，我发现application.js 中的以下 jQuery 插件导致引导模式无法正常工作：

import "tablednd/js/jquery.tablednd"

一旦被注释掉，模态就会按预期工作。 现在将寻找另一种解决方案。希望这可以防止其他人浪费宝贵的时间（几周）来解决这种“愚蠢”的错误。

一个问题：使用 jQuery-Plugins 需要小心吗？