Bootstrap Modal未关闭数据解除(Rails)

Question

我有一个带有编辑模式的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

Answer 1

由于bootstrap-modal-railsgem 可与 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">

这指定了路径，在本例中是响应edit中的方法的路径UsersController，添加remote: true启动异步请求到此类方法的选项，并将data-toggle和指定为数据属性data-target。

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

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

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部分并显示模态的代码：

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

最后，_edit部分将包含将添加到之前创建的 div 模式中的内容，这可以在.modal-bodydiv 中轻松调整，因此您可以添加以下形式：

<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。