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

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

然后，如果您愿意，可以在底部创建#modal-window div，设置为引导模式，最适合id和data-target与{ {1}}帮助＆＃34;打开＆＃34;。

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

id

您的控制器只需要方法get 'users/edit/:id', to: 'users#edit', as: 'edit'，该方法将在Javascript中响应，它只会收到已发送的edit参数：

id

当def edit @user = User.find(params[:id]) end以json格式响应时，您需要创建一个与您的方法名称相同的文件以及扩展名edit和js，这是erb ，并包含呈现edit.js.erb部分的代码，并显示模态：

_edit

最后$("#modal-window").html("<%= j render 'users/edit' %>"); $('#modal-window').modal('show')部分将包含将添加到之前创建的div模式的内容，这可以在_edit div中轻松调整，因此您可以添加表单：

.modal-body

注意这取决于Bootstrap，因此您需要将gem添加到<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">×</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>文件中，并配置js和css应用程序文件：

Gemfile

在application.js中，由于bootstrap依赖于jQuery，因此必须在引导程序之前添加，对于css配置，文件必须为# Gemfile gem 'bootstrap-sass' # application.js //= require jquery //= require bootstrap-sprockets # application.scss @import "bootstrap-sprockets"; @import "bootstrap";才能生成正确的scss ＆＃39; S

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

1 个答案: