CODEWITHSUNDEEP
ruby-on-railsrubydevisemodal-dialogbootstrap-modal
Miguel Coelho
Miguel Coelho

Reputation: 93

Modal (Devise) for Rails App

I Have an application in RoR and I need to make a login modal.

I´m using the gem devise.

sessions_controller.rb

    class Users::SessionsController < Devise::SessionsController
     respond_to :js
    end

In the devise folder of the views, I have the sessions folder with 2 files: _new.html.erb and new.js.erb

_new.html.erb

<div class="modal-dialog modal-sm">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h2 class="dark">Log in</h2>
    </div>
    <div class="modal-body">
      <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <div class="field">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true %>
      </div>

      <div class="field">
        <%= f.label :password %><br />
        <%= f.password_field :password, autocomplete: "off" %>
      </div>

      <% if devise_mapping.rememberable? -%>
      <div class="field">
        <%= f.check_box :remember_me %>
        <%= f.label :remember_me %>
      </div>
      <% end -%>

      <div class="actions">
        <%= f.submit "Log in", class: "btn btn-md btn-black-line" %>
      </div>
      <% end %>
      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>

new.js.erb

$('#modaldevise').html('<%= j render('new') %>');
$('#modaldevise').modal();

In my application.html.erb I use this code to use modal:

<div id="modaldevise" class="modal fade"></div>

Finally I have a side menu that have the login link:

<%= link_to 'Login', new_user_session_path, 'data-toggle' => "modal" , 'data-target' => "#modaldevise" %>

When I press the Login link, the background becomes darker and the modal is opened, but the information from the partial _new.html.erb is not showed.

What is wrong here?

Upvotes: 0

Views: 350

Answers (1)

jdgray
jdgray

Reputation: 1983

You can avoid using new.js.erb and do something like this:

application.html.erb

<div id="modaldevise" class="modal fade">
  <%= render 'your_path/new' %>
</div>

side menu

<%= link_to 'Sign in', '#', "data-toggle" => "modal", "data-target"=>"#modaldevise" %>

Upvotes: 2

Related Questions