Twitter Bootstrap Modal not popping up for user login

Question

I'm having trouble incorporating a twitter bootstrap pop-over modal with devise login/signup for when a user lands on our home page. I've spent some time implementing different methods but still no success. As of right now, when I click on the "login" button that is associated with the modal, the site refreshes but there is no modal.

apps/views/layout/_header.html.slim (my application.erb file calls in other partials)

li
  = link_to "Login", "data-toggle" => "modal", "data-target" => "#login_modal", :class => "btn btn-small"

li
  = link_to "Sign Up Free", "data-toggle" => "modal", "data-target" => "#sign_up_modal", :class => "btn btn-small"

I have two partials (sign_up_modal, login_modal) that are almost identical...

<div class="modal hide fade in" id="sign_up">
<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>

In my application.coffee I've made sure to require twitter/bootstrap

#= require twitter/bootstrap

And I've made sure to add the gem to my gemfile

gem "twitter-bootstrap-rails"

When I click on either "sign up" or "login" the page just refreshes..I believe I've added all my code, sorry new to stack overflow!

apps/controllers/sessions_controller.rb

class SessionsController < ApplicationController

def new

end

def create
  user = User.from_omniauth(env["omniauth.auth"])
  session[:user_id] = user.id
  redirect_to root_path
end

def destroy
 session[:user_id] = nil
 redirect_to root_path
end

end

Answer 1

Do this on the button that is supposed to trigger the modal

<%= link_to "login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#your_modal_id', :class => "btn btn-primary", :method: 'get' %>

For this to work you will have to overwrite devise sessions #new and registrations #new to respond to ajax requests. you can do this by introducing a respond_to block on both of these actions like this

respond_to do |format|
  format.js
end

then in your app/views/devise/registrations and app/views/devise/sessions create new.js.erb files. You can remove the login and sign-up forms from the modal and put the javascript to render the forms inside the modals in these new.js.erb files.

You can remove the form from the modal and in modal-body you put a loading gif. You can instead put the form in a partial and place it in app/views/devise/sessions/_login_form.html.erb. Then in app/views/devise/sessions/new.js.erb you do something like this.

$('#your_modal_id').remove-data
$('.modal-header').html ("<%= escape_javascript(render'/path/to/partial/with/header/content') %>");
$('.modal-body').html ("<%= escape_javascript(render '/path/to/partial')) %>");
$('.modal-footer').html ("<%= escape_javascript(render '/path/to/partial')) %>");