bootstrap modal for edit user profile - ruby-on-rails

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>")

Related

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?
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" %>

Devise sign in and sign up submit button disabled when accessing through navbar link rails 4

The sign-up button and sign in button of my devise form is disabled when I try to access both forms via the navbar links. To work I need to refresh the form. Any help ? Thanks in advance
<div class="panel panel-default form-signin col-md-offset-2">
<div class="panel-heading">
<h2 class="panel-title">Sign in</h2>
</div>
<div class="panel-body">
<%= simple_form_for(resource, defaults: { input_html: { class: 'form-control' } }, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<% if devise_mapping.rememberable? -%>
<%= f.check_box :remember_me %> <%= f.label :remember_me %>
<% end -%>
</div>
<div class="panel-footer">
<%= f.submit 'Sign in' %>
<% end %>
</div>
</div>
</div>
<div class="col-md-offset-2">
<%= render "devise/shared/links" %>
</div>

Devise Rails Bootstrap - sign up modal

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

Devise sign up form with Rails & Bootstrap

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 %>

How do you load any partial in a single modal

I'm trying to figure out to load a sign UP partial and a sign IN partial in the same bootstrap modal code in an effort to keep it dry.
How is that possible with my current situation?
<%= link_to "Sign in", :sign_in, id: "signin", "data-toggle" => "modal", "data-target" => "#sign-in" %>
modal partial
<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 In</h4>
</div>
<div class="modal-body">
<%= render "sessions/new" %>
</div>
</div>
</div>
</div>
New session partial
<div class="row">
<div class="span6 offset3">
<%= form_for(:session, url: sessions_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit "Sign in", class: "btn btn-large btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>
I would render both partials and use javascript to show/hide the correct ones. Make sure in your signup partial you use the class signup in the outermost element and render that within render that right below your signin partial
<%= link_to "Sign in", :sign_in, id: "signin", "data-toggle" => "modal", "data-target" => "#sign-in" %>
<%= link_to "Sign in", :sign_in, id: "signup", "data-toggle" => "modal", "data-target" => "#sign-in" %>
<div class="row signin">
<div class="span6 offset3">
<%= form_for(:session, url: sessions_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit "Sign in", class: "btn btn-large btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>
Javascript
$(document).ready(function() {
$("#signin").click(function() {
$(".modal .signup").hide();
$(".modal .signin").show();
});
$("#signup").click(function() {
$(".modal .signin").hide();
$(".modal .signup").show();
});
});
Another way
Another way to do it would be to use ajax to load your partial into the body of the modal. You'd want a controller action for it that simply renders a partial and has layout false so you don't get excess layout elements passed with it.
If you don't have a lot, you don't need to make it a new controller, but I just did that here
Javascript
$(document).ready(function() {
$("#signup").click(function() {
setModal("modals/signup");
});
$("#signin").click(function() {
setModal("modals/signin");
});
});
// Doesn't have to be in a function, but it's better to keep it dry.
// Could also add more configuration (like the selector it uses)
function setModal(url) {
$.get(url, function(data) {
$("#myModal .modal-body").html(data);
});
}
Controller
class ModalsController < ApplicationController
def signin
render partial: "sessions/new", layout: false
end
def signup
render partial: "registrations/new", layout: false
end
end
Routes
get "modals/signin", to: "modals#signin"
get "modals/signup", to: "modals#signup"

Resources