質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

1252閲覧

【Rails】ajax:errorが発火しません。

tinmanCtr

総合スコア9

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/09/23 02:28

編集2018/09/23 04:45

ログイン失敗時のエラー表示がうまくいきません。具体的な流れは、

SessionsController#newでモーダルダイアログを表示

失敗時はAjaxでフォームにエラー内容を表示

簡略化して該当箇所を示します。

  • sessions/new.js.erb(application.html.erbは省略)

js

1$("#login-modal").html("<%= escape_javascript(render 'sessions/login_form') %>") 2$("#login-modal").modal("show")
  • sessions/_login_form.html.erb(post "/login", to: "sessions#create")

html

1<div class="modal-dialog"> 2 <div class="modal-content"> 3 <%= form_for(:session, url: login_path, remote: true, html: { id: "login-form" }) do |form| %> 4 5 <div id="error-explanation" class="hide"> 6 <div id="error-alert" class="alert alert-danger"></div> 7 <div id="errors"><ul/></div> 8 </div> 9 10 <!-- フォーム(省略) --> 11 12 <%= form.submit "ログイン" %> 13 <% end %> 14 </div> 15</div> 16
  • sessions_controller.rb(create.js.erbは空)

ruby

1class SessionsController < ApplicationController 2 3 def create 4 @user = User.find_by(email: params[:session][:email]) 5 if @user && @user.authenticate(params[:session][:password]) 6 # ログイン処理(省略) 7 else 8 render json: { errors: ["メールアドレスまたはパスワードが間違っています。"] }, status: 422 9 end 10 end 11 12end
  • sessions.coffee

coffeescript

1$(document).on "turbolinks:load", -> 2 3 $("#login-form").on "ajax:error", (e) -> 4 $("#error-explanation").removeClass("hide").show() 5 errors = e.detail[0].errors 6 7 #(以下略)

status code: 422、content-type: application/jsonで{"errors":["メールアドレスまたはパスワードが間違っています。"]}とresponseが来ますが、"ajax:error"イベントが発火しません。(alertで確認済み)

似たような機構で新規登録は実装できたので、モーダルダイアログが原因なのかとも思いましたが、原因が分かる方ご教授お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問