I am trying (and failing) to get Rails Bootstrap and Devise to work so that my sign up form works in a Bootstrap modal.
I have configured the view so that it fits inside the modal window however, when I click on the navbar link to 'register' - the page refreshes but nothing happens. I was trying to follow these instructions, but I can't understand them from the point that they suggest creating new.js.erb files.
Twitter Bootstrap Modal not popping up for user login
I have as follows:
views/devise/registrations/new.html.erb
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sign up</h4>
</div>
<div class="modal-body">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true %>
<%= f.input :last_name, required: true, autofocus: true %>
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true %>
<%= f.input :password_confirmation, required: true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
I have devise/shared/registration_items
<% if user_signed_in? %>
<li>
<%= link_to('Edit registration', edit_user_registration_path) %>
</li>
<% else %>
<li>
<%= link_to 'Register', new_user_registration_path, :remote => true, 'data-toggle' => "modal", 'data-target' => "#myModal", :method => 'get' %>
</li>
<% end %>
and _navbar.html.erb
<%= render 'devise/shared/login_items' %>
<%= render 'devise/shared/registration_items' %>
Can anyone help?
This works! The modal and the link to it need to be in the same view file.
<% if user_signed_in? %>
<li>
<%= link_to('Edit registration', edit_user_registration_path) %>
</li>
<% else %>
<li>
<%= link_to 'Register', new_user_registration_path, :remote => true, 'data-toggle' => "modal", 'data-target' => "#myModal", :method => 'get' %>
</li>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Request an invite</h4>
</div>
<div class="modal-body">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true %>
<%= f.input :last_name, required: true, autofocus: true %>
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true %>
<%= f.input :password_confirmation, required: true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
<% end %>
Related
I have added bootstrap modal to edit user profile. It edits user profile but when there is an error in the form content it redirects to localhost:3000/user .how can I get errors in the modal itself? I used devise gem for user. what did I do wrong
_edit.html.erb
<div class="modal" id="EditProfileModal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit user</h4>
</div>
<div class="modal-body">
<div class="container">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {method: :put}) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br/>
<%= f.email_field :email, autofocus: true, :value => current_user.email %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="form-group">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br/>
<%= f.password_field :password, autocomplete: "off" %>
<% if #minimum_password_length %>
<br/>
<em><%= #minimum_password_length %> characters minimum</em>
<% end %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br/>
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="form-group">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br/>
<%= f.password_field :current_password, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: {confirm: "Are you sure?"}, method: :delete %></p>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
header
<% if user_signed_in? %>
<header>
<%= link_to "sign out", destroy_user_session_path, method: :delete %>
<%= link_to "Edit profile", '#EditProfileModal', {'data-toggle' => "modal"} %>
<div style="text-align: center">Signed in as <b><%= current_user.email %></b></div>
</header>
<%= render "devise/registrations/edit"%>
<% end %>
Form submission always forces a page reload. You can bypass this by submitting your form as ajax request. In Rails you can do this by passing option remote: true to your form_for call. Keep in mind, that to properly handle response from server you gonna need to handle javascript event:
$('[selector]').on('ajax:success', function(e, data, status, xhr) {
// do something
})
You need to use ajax for form submission with data-remote=true.
than you need to override the update action of registrations controller,
In the update action, you can check whether there is error or not with
if resource.update_attributes(your_params)
redirect_to :back # else any where you want to redirect
else
respond_to :js
end
and in registrations/update.js.erb you can add the div for show errors.
$(".modal-body").prepend("<div><%= resource.errors %></div>")
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?
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" %>
I'm trying to alter my devise registration view file to work with bootstrap modals.
I have followed the bootstrap instructions and slotted the form into the modal and linked it to the navbar menu. Now, when i click on 'Register' in my navbar. Nothing happens. The form doesn't go anywhere. I had this working when it was just a standard page view. Can anyone help? Thank you.
I am trying to follow this answer but am getting confused: Twitter Bootstrap Modal not popping up for user login
I have:
views/devise/shared/registration_items:
<% if user_signed_in? %>
<li>
<%= link_to('Edit registration', edit_user_registration_path) %>
</li>
<% else %>
<li>
<%= link_to 'Register', new_user_registration_path, :remote => true, 'data-toggle' => "modal", 'data-target' => "#myModal", :method: 'get' %>
</li>
<% end %>
views/devise/registrations/new
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sign up</h4>
</div>
<div class="modal-body">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true %>
<%= f.input :last_name, required: true, autofocus: true %>
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true %>
<%= f.input :password_confirmation, required: true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
respond_to do |format|
format.js
end
I get a syntax error (syntax error, unexpected ':', expecting =>) on this line:
<%= render 'devise/shared/registration_items' %>
Please can anyone help. Thank you.
There is a syntax error. Change to :method => 'get' or method: 'get' in the line below
'data-toggle' => "modal", 'data-target' => "#myModal", :method: 'get'
I'm trying to use a modal for my Rails Devise Bootstrap sign in & sign up forms.
I have tried to alter the link in views/devise/shared/registration_items to:
<% if user_signed_in? %>
<li>
<%= link_to('Edit registration', edit_user_registration_path) %>
</li>
<% else %>
<li>
<%= link_to('Register', new_user_registration_path, data-toggle="modal" data-target="#myModal") %>
</li>
<% end %>
I get a syntax error in the 'link_to(Register...' line. Please can someone show me how to make these forms work with bootstrap modals.
Here is my registration_new view if it helps:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sign up</h4>
</div>
<div class="modal-body">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true %>
<%= f.input :last_name, required: true, autofocus: true %>
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true %>
<%= f.input :password_confirmation, required: true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
Thank you
You missed a comma:
<%= link_to('Register', new_user_registration_path, data-toggle="modal", data-target="#myModal") %>
Also you should make extra parameters a hash, or better this:
<%= link_to 'Register', new_user_registration_path, 'data-toggle' => "modal", 'data-target' => "#myModal" %>
Should work. Check this
This is another Rails 4, Devise question about getting the login/signup forms into Bootstrap modals. I've noticed so many of these questions don't get any answers. I'd really appreciate it if anyone can help me find resources that help. I have tried rails casts, blog posts (more than 50) and leaving comments on those don't inspire responses either. I will create a bounty for help when time permits. Please help.
I have a bootstrap navbar, with this code:
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Register", new_user_registration_path %></li>
In the views/devise/sessions/new file I have:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Sign up</h4>
</div>
<div class="modal-body">
<%= simple_form_for(:user, :url => user_session_path) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email, :required => true, :autofocus => true %>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div><!-- /.modal-content
</div>
</div> -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Sign up</h4>
</div>
<div class="modal-body">
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email, :required => true, :autofocus => true %>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div><!-- /.modal-content
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have an application helper which has:
def resource_name
:user
end
def resource
#resource ||= User.new
end
def devise_mapping
#devise_mapping ||= Devise.mappings[:user]
end
Really not sure what I've done wrong. There is nothing to trigger the modal. Several other blog posts have separate js script but those aren't working either.
Please please help. Thank you so much.