Twitter Bootstrap Modals in Rails

Question

I've been pulling my hair out for a few days now on this and still can't the modals to pop up with the devise/omniauth login.

I've looked at all tutorials but still having issues with my code. Any help would be great!

#gemfile
gem 'twitter-bootstrap-rails'

Then my shared/header which is being rendered in application.html.slim

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'

In my application.coffee at the top I'm making sure I require bootstrap

#= require_self
#= require twitter/bootstrap
#= require ./util
ETC...

and I have my _sign_up_modal.html.erb and _login_modal.html.erb which are both very similar so only going to post one.

<div class="modal fade" id="sign_up_modal">
    <div class="modal-dialog">
        <div class="modal-content">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">x</button>
        <h2 class="modal-title">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>
</div>
</div>

and I changed my application_helper

module ApplicationHelper
  def page_title
    @page_title || ENV['SITE_TITLE']
  end
  # Added for twitter bootstrap modals
  def resource_name
    :user
  end

  def resource
    @resource ||= User.new
  end

  def devise_mapping
    @devise_mapping ||= Devise.mappings[:user]
  end

end

When I click on either of the links, the page just refreshes...

Answer 1

Put this code in your application.html.slim

link_to "Sign Up Free", new_user_session_path, :remote => true, :class => "btn btn-small",    :method => 'get'

<div class="modal fade" id="sign_up_modal">
  <div class="modal-dialog">
    <div class="modal-content" id="sign_up_form"></div>
  </div>
</div>

and move the remaining piece of code to _sign_up_modal.html.erb

i.e

starting from <div class="modal-header"> ...... till <% end %>

Now create a corresponding new.js.erb file and add this piece of code.

$('#sign_up_modal').modal(); 

$('#sign_up_form').html("<%= escape_javascript(render("sign_up_modal")) %>")