Modem Bootstrap nie zamyka się przy zwalnianiu danych (Rails)

Question

Mam aplikację szyny z modulem edycji. Funkcja wysyłania działa, ale przyciski zamykania nie działają.

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> 

linie z poglądem, że otwiera i mieści się modalne

<%= 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> 

Mam ustawione klejnoty. //= require bootstrap/modal i //= require jquery są w moich application.js

Edit: Pełne 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

Jako gem bootstrap-modal-rails będzie pracować z szyn 4 wersji aplikacji, można rozważyć tylko przy użyciu bootstrap modals to ge to działa.

Można utworzyć modalny div, a następnie dodać przycisk, który spowoduje wysłanie żądania do określonej metody w kontrolerze, który odpowie z pliku js, który następnie wyrenderuje częściowe wypełnienie modalnego elementu div.

w twojej index.html.erb można ustawić 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"> 

ten określa ścieżkę, w tym przypadku taki, który reaguje na sposobie w UsersControlleredit, dodaj opcję remote: true zacząć asynchroniczne żądanie do takiej metody, i określi jako dane atrybuty data-toggle i data-target.

Następnie w dolnej części, jeśli wolisz, możesz utworzyć #modal-window div, setted pracować jako bootstrap modal, i których większość meczu w id i data-target z link_to pomocnika być „otwarty”.

Trasa, która jest zdefiniowana w link_to oczekuje id i wybierz opcję alias, aby utworzyć krótką wersję:

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

Twój kontroler musi tylko metodę, edit, która będzie reagować w JavaScripcie, to po prostu odbiera id param, który jest wysyłany:

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

Jako edit odpowiada w formacie jSON, to trzeba utworzyć plik o tej samej nazwie od wybranej metody plus przedłużenie js i erb, to edit.js.erb i zawiera kod, aby uczynić _edit częściowe i pokazać modalne:

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

Wreszcie _edit częściowy będzie zawierać treść, która będzie dodana do div modalnej utworzony wcześniej, to może być łatwo manipulowane w .modal-body div, więc można dodać postać:

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

Uwaga to zależy Bootstrap, więc trzeba dodać gem do pliku Gemfile i configur e oba js i plików aplikacji css:

# Gemfile 
gem 'bootstrap-sass' 

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

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

W application.js, jak bootstrap zależy jQuery, to należy dodać przed bootstrap jednej, a do konfiguracji css, plik musi być scss w celu zrób właściwy import.