Bootstrap Modal 未关闭数据关闭（Rails）

Posted 2023-05-08

【中文标题】Bootstrap Modal 未关闭数据关闭（Rails）

【英文标题】：Bootstrap Modal not closing on data dismiss (Rails)

【发布时间】：2017-12-04 23:37:56

【问题描述】：

我有一个带有编辑模式的 Rails 应用程序。提交功能有效，但关闭按钮不执行任何操作。

Edit.js.erb：

$("#modal-window").html("<%= escape_javascript(render 'users/edit') %>");

_edit.html.erb

<div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
 <%= form_for @user,url: root_path,:method => :GET do |f|%> 
    <%= f.label :password %>
    <%= f.password_field :password, class: 'form-control' %>
     <%= f.submit "Save changes", class: "btn btn-primary" %>
     <%# submit_tag 'Cancel', :type => :reset, :class => "btn btn-danger", "data-dismiss" => "modal", "aria-hidden" => "true" %>
<% end %> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

从视图中打开和容纳模态的线条

<%= link_to 'Edit Password', edit_path(user.id),  :remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'  

......


<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

我已经设置好了宝石。 //= require bootstrap/modal 和 //= require jquery 在我的 application.js 中

编辑：完整的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require bootstrap/modal
//= require jquery

【问题讨论】：

您的 application.js 文件中还包含哪些其他 .js 文件？

@Rohit 查看编辑

您只需添加“//= require jquery_ujs”。如果这也不起作用，需要最新的 jquery、jquery ui 和 bootstrap..

完成，没有变化@Rohit

您是否尝试在 application.js 文件中的 gem 之前添加 jquery？

【参考方案1】：

由于bootstrap-modal-rails gem 可以与 Rails 4 应用程序版本一起使用，您可以考虑只使用 Bootstrap 模式来使其工作。

您可以创建一个模态 div，然后添加将向控制器中的某个方法发出请求的按钮，该方法将响应一个 js 文件，然后将呈现填充模态 div 的部分。

在您的index.html.erb 中，您可以设置link_to helper：

<%= link_to 'Edit Password', edit_path(user), remote: true, data:  toggle: 'modal', 'target': '#modal-window'  %>
...
<!-- Modal -->
<div class="modal fade " id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

这指定路径，在这种情况下，响应UsersController中的edit方法，添加remote: true选项以启动对此类方法的异步请求，并将@987654328指定为数据属性@ 和data-target。

然后，如果您愿意，可以在底部创建#modal-window div，设置为引导模式，并且在id 和data-target 中最匹配link_to 助手为“打开”。

link_to 中定义的路由需要id，并使用别名选项创建一个短版本：

get 'users/edit/:id', to: 'users#edit', as: 'edit'

您的控制器只需要 edit 方法，它将在 Javascript 中响应，它只接收发送的 id 参数：

def edit
  @user = User.find(params[:id])
end 

由于edit以json格式响应，那么你需要创建一个与你的方法同名的文件加上扩展名js和erb，这是edit.js.erb，并包含渲染代码_edit partial，并显示模态：

$("#modal-window").html("<%= j render 'users/edit' %>");
$('#modal-window').modal('show')

最后，_edit 部分将包含将添加到之前创建的 div 模态的内容，这可以很容易地调整，在 .modal-body div 中，因此您可以添加表单：

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>

    <div class="modal-body">
      <%= form_for @user, url: edit_path do |f|%> 
        <%= f.label :password %>
        <%= f.password_field :password, class: 'form-control' %><br>
        <%= f.submit "Save changes", class: "btn btn-primary" %>
      <% end %> 
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

注意这取决于 Bootstrap，所以你需要将 gem 添加到你的 Gemfile 文件中，并配置 js 和 css 应用程序文件：

# Gemfile
gem 'bootstrap-sass'

# application.js
//= require jquery
//= require bootstrap-sprockets

# application.scss
@import "bootstrap-sprockets";
@import "bootstrap";

在application.js中，由于bootstrap依赖于jQuery，所以必须在bootstrap之前加上这个，并且对于css配置，文件必须是scss，才能做出正确的import。