ユーザプロファイルを編集するためのブートストラップモーダル

Question

ユーザプロファイルを編集するためのブートストラップモーダルを追加しました。ユーザープロファイルを編集しますが、フォームの内容にエラーがあると、localhost：3000/userにリダイレクトされます。モーダル自体にエラーが発生しますか？私はユーザーのために考案の宝石を使用しました。私が何をした間違った

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

ヘッダ

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

あなたは、データのリモート=真でフォーム送信のためのAJAXを使用する必要があります。 あなたが登録コントローラ、更新アクションで

の更新アクションを上書きする必要があるよりも、あなたが

if resource.update_attributes(your_params) 
    redirect_to :back # else any where you want to redirect 
else 
    respond_to :js 
end 

とすることができます登録/ update.js.erbのあるエラーがあるか否かを確認することができますショーのエラーのためにdivを追加してください。

$(".modal-body").prepend("<div><%= resource.errors %></div>") 

Answer 2

フォームの提出は、常に、ページのリロードを強制します。これを回避するには、フォームにajaxリクエストを送信してください。 レールでは、form_forコールにオプションremote: trueを渡すことでこれを行うことができます。あなたがつもりJavaScriptのイベントを処理する必要があることは、適切にサーバからの応答を処理するために、覚えておいてください：

$('[selector]').on('ajax:success', function(e, data, status, xhr) { 
    // do something 
})