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

Question

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

Answer 1

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

Answer 2

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