Bootstrap Modal not closing on data dismiss (Rails)

Viewed 2117

I have a rails application with an edit modal. The submit functionality works, but the close buttons do not do anything.

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>

The lines from the view that opens and houses the 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 the gems set up. //= require bootstrap/modal and //= require jqueryare in my application.js

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'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
1 Answers
Related