Bootstrap Modal does not close when deleting data (Rails)

Question

I have a rails application with a modified modal. The send function works, but the close buttons do nothing.

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> 

Rows from a view that opens and contains modal

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

I have gems. //= require bootstrap/modal and //= require jquery are in my application.js application

Edit: Full 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 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

Since the pearl bootstrap-modal-rails will work with the version of the Rails 4 application, you can simply use the Bootstrap modality to work with it.

You can create a modal div and then add a button that will query a specific method in the controller that will respond with a js file, which will then display a partial that will fill the modal div.

In index.html.erb you can set 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"> 

Specifies the path, in this case the one that corresponds to the edit method in UsersController , adds the remote: true parameter to run an asynchronous request to such a method, and indicates the data-toggle and data-target data attributes.

Then, at the bottom, if you prefer, you can create a div #modal-window , configured to work as a bootstrap mod, and which most matches in id and data-target with the link_to as "open".

The route defined in link_to expects an id and uses an alias parameter to create a short version:

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

For your controller, you only need the edit method, which will respond in Javascript, it just gets the id parameter sent:

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

As edit responds in json format, you need to create a file with the same name of your method plus the extension js and erb , it is edit.js.erb and contains code to display _edit partial and show modal:

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

Finally, the _edit part will contain content that will be added to the previously created div mod, which can be easily changed into a .modal-body div, so you can add a form:

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

Note that this depends on Bootstrap, so you need to add the stone to your Gemfile and configure the js and css application files:

 # Gemfile gem 'bootstrap-sass' # application.js //= require jquery //= require bootstrap-sprockets # application.scss @import "bootstrap-sprockets"; @import "bootstrap"; 

In application.js, since bootstrap is dependent on jQuery, this must be added before the boot, and for the css configuration, the file must be scss in order to make the correct import .