deviseを使用したupdate失敗時の画面遷移がうまく行きません

Question

ediページをモーダルで表示し、
更新が「失敗したらモーダル内にエラーメッセージを出す処理を行いたいです。
お忙しい中恐縮ですが、ご教授頂けないでしょうか。

■ 現状 → モーダルは出て更新もできるが、エラー時に元々のedit.html.erbに遷移してしまう

＊_edit.html.erb（ここにエラーを出したい）＊

↓
＊edit.html.erb（こちらに遷移してしまう）＊

■ 行った対策 →　edit.html.erbを手動で削除し_edit.html.erbのみにした

■ 判らない内容　→　更新成功後のパスはregistrations_controllerに

＊registrations_controller＊

def after_update_path_for(resource)
end

を記入することで達成できるが、失敗時の処理はどのように書けば良いのか。。。

＊_edt.html.erb＊

<div class="modal-dialog modal-lg modal-dialog-center">
    <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>
    <h1 class="modal-title">お客様情報編集</h1>
  </div> 
    <div class="modal-body"> 
<div class="row">
        <div class="col-md-6 col-md-offset-3">
<%= form_for(resource, as: resource_name, url: user_registration_path) do |f| %>
 <div class="js-message-errors"></div>


<div class="field">
  <%= f.label :name, class: "label-signup" %><br />
  <%= f.text_field :name, autofocus: true, autocomplete: "name", class: "form-control" %>
</div>

  <div class="field">
    <%= f.label :email, class: "label-signup" %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
  </div>

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
  <% end %>

  <div class="field">
  <%= f.label :contact, class: "label-signup" %><br />
  <%= f.number_field :contact, autofocus: true, autocomplete: "contact", min: 1, max: 31, class: "form-control" %>
</div>

  <div class="field">
    <%= f.label :password ,class: "label-signup"%></i><br />
    <%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
    <% if @minimum_password_length %>
      <br />
      <em><%= @minimum_password_length %> characters minimum</em>
    <% end %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation, class: "label-signup" %>　(パスワードを変更する場合は必須です)<br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
  </div>

  <div class="field">
    <%= f.label :current_password , class: "label-signup"%>　(1つでも項目を変更する場合は必須です)<br />
    <%= f.password_field :current_password, autocomplete: "current-password", class: "form-control" %>
  </div>

  
    <%= f.submit "更新する",class: "btn btn-primary btn-block btn-signup" %>
<% end %>
</div> 
    </div> 
</div> 
</div>
</div>

Rails.application.routes.draw do
  
  get 'sessions/new'

  devise_for :users, controllers: {
    sessions:      'users/sessions',
    passwords:     'users/passwords',
    registrations: 'users/registrations'
  }
  devise_for :admins, controllers: {
    sessions:      'admins/sessions',
    passwords:     'admins/passwords',
    registrations: 'admins/registrations'
  }
  # トップページ
  root 'home#top'
  # ログイン機能
  get    '/login', to: 'sessions#new'
  post   '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  # モーダルページ
  get '/top_overview', to: 'home#top_overview'
  resources :users do
    member do
      get 'edit_admin_index' #admin.indexの編集
      patch 'update_admin_index'#admin.indexの編集
    end
  end 
end

＊application_controller＊


class ApplicationController < ActionController::Base
  before_action :configure_account_update_params, if: :devise_controller?
  protect_from_forgery with: :exception

  private
    def storable_location?
      request.get? && is_navigational_format? && !devise_controller? && !request.xhr? 
    end

   

    def after_sign_in_path_for(resource_or_scope)
      stored_location_for(resource_or_scope) || super
    end
  


  
  protected

  def configure_account_update_params
    devise_parameter_sanitizer.permit(:account_update, keys: [:name, :contact])
    
  end
end

registrations_controllerには更新成功時の遷移処理しか書いていません。
宜しくお願いします。

Answer 1

form_for(resource, as: resource_name, url: user_registration_path) do |f|
の場合、edit.html.erbが呼び出されます。現状はこちらの動きですね。

form_for(resource, as: resource_name, url: user_registration_path, remote: true) do |f|
にすれば、edit.js.erbが呼び出されるようになり、画面遷移は発生しなくなります。

ただ、remote: trueをつけた時の書き方はより複雑になります。
（update成功時の処理も書き換えないといけなくなります。）

試してみてうまくいかなければ、質問文変更やコメントなどしていただけたらと思います。

Comments

[zoff77]

ご丁寧にお答え下さり、ありがとうございます。remote: trueにしたところ実装ができました！
成功処理につきましては、自らで調べながら行ってみたいと思います。
ありがとうございました。

[siruku6]

うまく行ったようで良かったです！
remote: true をうまく使うと利用者の待ち時間を大幅に減らせるので、場面をうまく見極めてここぞというところで使いたいですね。
（書き方が複雑になるので、乱用は注意です...同僚に嫌がられます）

[zoff77]

remote: trueはそのようなメリットもあるのですね！大変勉強になりました！！