ブートストラップモーダルがデータを閉じるのをやめない（レール）

Question

私は編集モーダルを持つレールアプリケーションを持っています。送信機能は動作しますが、閉じるボタンは何もしません。

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> 

を開き、収容ビューからの行

私は宝石を設置しました。全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宝石はRailsの4アプリケーションのバージョンで動作するだろうとして、あなただけのブートストラップを使用して検討することもでき：//= require bootstrap/modalと//= require jqueryは私application.jsに

編集されていますそれは働くためのモーダルです。

モーダル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オプションを追加そのようなメソッドへの非同期要求、およびデータ属性としてはdata-toggleおよびdata-targetを指定します。

その後、ご希望の場合は底に、あなたは「開く」するlink_toヘルパーでidとdata-targetに#modal-windowブートストラップモーダルとして動作するようにsettedのdiv、およびそのほとんどの試合を作成することができます。

link_toで定義されていますルートがidを期待して、短いバージョンを作成するには、aliasオプションを使用します。

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

あなたのコントローラは、単にJavaScriptで対応させていただきます方法、editを、必要とする、それだけで

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

editように応答をJSON形式で、その後、あなたは同じ名前のファイルを作成する必要があります。送信されていますid paramは受け取りますあなたの方法に加えて拡張jsとerbの、これはedit.js.erbあり、かつ部分的_editをレンダリングし、モーダルを表示するコードが含まれています

$("#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> 

注これはブートストラップに依存するため、あなたはGemfileファイルに宝石を追加する必要がある、とconfigur E JSとCSSのアプリケーションファイルの両方：application.jsで

# Gemfile 
gem 'bootstrap-sass' 

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

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

、ブートストラップは、jQueryのに依存して、これはブートストラップ1の前に追加しなければならない、とCSSの設定のために、ファイルをするためにscssでなければなりません適切なimportのものを作ってください。