bootstrap modal for edit user profile

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">&times;</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 %>&nbsp;&nbsp;
      <%= 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

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

Answer 2

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