简体   繁体   English

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

[英]Rails 6 Bootstrap 4 Modal not closing on submit

Open Modal is working fine, but not close modal.打开模式工作正常,但不是关闭模式。 Here my files:这是我的文件:

in client.haml ( the client layout)client.haml (客户端布局)

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

routes.rb路线.rb

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

blame.js.erb怪罪.js.erb

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

_blame.haml _blame.haml

.modal#blame.fade.hide{tabindex: "-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 Javascript

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

The console.log("link clicked"); console.log("link clicked"); is working, text appears in console.正在工作,文本出现在控制台中。

A few resources amongst others I already considered: bootstrap modal popup not closing [https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content][2] [https://stackoverflow.com/questions/52797328/rails-bootstrap-modal-not-closing][3]我已经考虑过的一些资源: 引导模式弹出窗口未关闭[https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content][2] [https:// /stackoverflow.com/questions/52797328/rails-bootstrap-modal-not-closing][3]

After a long odyssey of searching, trial'n'error, I found out that the following jQuery plugin in application.js was causing the bootstrap modal not working properly:经过长时间的搜索,反复试验,我发现application.js中的以下 jQuery 插件导致引导模式无法正常工作:

import "tablednd/js/jquery.tablednd"

Once commented out, the modal was working as desired.一旦被注释掉,模态就会按预期工作。 Will now look for another solution.现在将寻找另一种解决方案。 Hope this might prevent others from losing valuable time (weeks) solving such a 'stupid' error.希望这可以防止其他人浪费宝贵的时间(几周)来解决这种“愚蠢”的错误。

A question: Does one have to be careful with jQuery-Plugins?一个问题:是否必须小心使用 jQuery 插件?

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

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