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.
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'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
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 %>
Firstly, this does not display any errors when I click the link. Can anyone suggest why the modal is not being displayed on the button click?
I do get the contents of the .js.erb file converted to html printed in the Network/Preview section of my dev tools:
$("#contactForm").html("<div class=\"modal fade\" id=\"contactForm\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n ...
I've got the link_to call:
<%= link_to 'Contact', contact_form_path, {:remote => true, 'data_toggle' => "modal", 'data-target' => '#contactForm'} %>
ContactsController method:
def contact_form
#contact = Contact.new
respond_to do |format|
format.js
end
end
routes.rb
get "contacts/contact_form" => 'contacts#contact_form', :as => :contact_form
contact_form.js.erb:
$("#contactForm").html("<%= escape_javascript(render(:partial => 'contacts/contact_form') )%>");
contacts/contact_forml.html.erb
<div class="modal fade" id="contactForm">
<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">send me a message</h4>
</div>
<div class="modal-body">
<% if flash[:notice] %>
<p class='notice'><%=h flash[:notice] %></p>
<% end %>
<%= form_for(#contact) do |f| %>
<%= f.text_field :name, :placeholder => "first name" %>
<%= f.text_field :email, :placeholder => "email" %>
<%= f.text_area :message, :placeholder => "your message..."%>
<div class="actions">
<%= f.submit :value => "Send Feedback", :class => "btn" %>
</div>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks.
You just forgot to call the modal to show the modal. And modal partial should be rendered into wrapper div, so contact_form.js.erb should look like this:
$("#modal-div").html("<%= escape_javascript(render(:partial => 'contacts/contact_form') )%>");
$("#contactForm").modal();
And the view where you are adding modal should have empty div element
<div id="modal-div"></div>