Twitter Bootstrap Modals not working

Question

I've been trying to set up twitter bootstrap modals for my devise and omniauth logins with no success. I've tried following several tutorials as well and still can't get them to open.

I'm not getting an error in my server logs, just the following:

"Processing by Devise::SessionsController#new as JS"

I've required twitter/bootstrap in my application.coffee file

#= require_self
#= require twitter/bootstrap
#= require ./util
#= require ./home and so on

In my application.html.slim I've added two additional links to sign in/login next to the existing ones just to make sure these work before deleting the old ones

li
  = link_to "Login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#login_modal', :class => "btn btn-small", :method => 'get'

li
  = link_to "Sign Up Free", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#sign_up_modal', :class => "btn btn-small", :method => 'get'

and then i have my sign_up_modal and login_modal which are both almost identical.

<div class="modal hide fade in" id="sign_up_modal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign Up</h2>
</div>
<div class="modal-body">
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>
<div><%= f.label :email %><br />
    <%= f.email_field :email, :autofocus => true %></div>
<div>
    <%= f.label :password %><br />
    <%= f.password_field :password %>
</div>
<div>
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %>
</div>
</div>
<div class="modal-footer">
  <p>
    <div>
      <%= f.submit "Sign up", :class => 'btn btn-small btn-success' %>
    </div>
  </p>
  <p>
    <a href="#" class="btn btn-small" data-dismiss="modal">Close</a>
  </p>
   </div>
  <% end %>
  </div>

Answer 1

For "Login" link as shown below to work,

li
  = link_to "Login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#login_modal', :class => "btn btn-small", :method => 'get'

You will need to have id = login_modal of your div (enclosing the Login form) For example:

<div class="modal hide fade in" id="login_modal">

For "Sign Up Free" link as shown below to work,

li
  = link_to "Sign Up Free", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#sign_up_modal', :class => "btn btn-small", :method => 'get'

You will need to have id = sign_up_modal of your div (enclosing the Sign Up form) For example:

<div class="modal hide fade in" id="sign_up_modal">