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

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

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

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

Ruby on Rails 6

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

Ruby on Rails

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

Ajax

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

Q&A

解決済

2回答

784閲覧

Remote :trueでxxx.js.erbファイルが無いときの挙動について

no1knows

総合スコア3365

Ruby

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

Ruby on Rails 6

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

Ruby on Rails

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

Ajax

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

0グッド

0クリップ

投稿2020/02/01 23:57

編集2020/02/23 01:17

知りたいこと

Remote :truexxx.js.erbファイルが無いときの挙動を知りたいのですが、自分の理解につながるページが見つけきれなかったので質問させていただきます。

##前提と質問
0. ScaffoldでTestを作り、Formはremote: trueを利用
0. Submitをクリック。
0. AjaxでSumitした値がデータベースに保存。
0. 下記の②に記載があるとおりshow.js.erbが呼び出される。
0. 4でshow.js.erbがない場合の挙動なのですが、①のリダイレクト先がturbolinksで呼び出されるという認識で良いのでしょうか?

def create @test = Test.new(test_params) respond_to do |format| if @test.save ①format.html { redirect_to @test, notice: 'Test was successfully created.' } ②format.json { render :show, status: :created, location: @test }    #省略

##試したこと

Ajaxを利用して保存(Create)したあと、indexに戻りたいと思って、色々と試していたら、①をredirect_to tests_urlにしたら期待通りの動作をしたため、上記のように考えました。

どうぞよろしくお願いいたします。

##追記(2020/2/23)

Controllerの設定を

A.scaffoldで作成したままの状態
B.scaffoldで作成し、redirect先をtests_urlにした場合


【Aの設定】
formの設定     : remote: true
Controllerの設定  : redirect_to @test(#showへのリダイレクト)
show.js.erbの有無 : 無し


【Aの結果】
TestController#Createメソッドがjsで実行されている。(remote:true)
(通常であればshow.js.erbが実行されるはずだが)・・・・※ここが勘違い※
TestController#showがHTMLで実行されている


【Aの実行結果】

Started POST "/tests" for 127.0.0.1 at 2020-02-23 09:02:07 +0900 Processing by TestsController#create as JS Parameters: {"authenticity_token"=>"sE3rv3ba5Fn8pSF/UBVBTNZn3SNQeh/Tf2a/jzh1FZCLTRbzwbrbhbp7IXuli5vKJBh9cg49oC3Q7T1DhkS90w==", "test"=>{"name"=>"iiiiiiiiiiii"}, "commit"=>"Create Test"}  (0.1ms) begin transaction ↳ app/controllers/tests_controller.rb:30:in `block in create' Test Create (0.4ms) INSERT INTO "tests" ("name", "created_at", "updated_at") VALUES (?, ?, ?) [["name", "iiiiiiiiiiii"], ["created_at", "2020-02-23 00:02:07.433656"], ["updated_at", "2020-02-23 00:02:07.433656"]] ↳ app/controllers/tests_controller.rb:30:in `block in create'  (6.6ms) commit transaction ↳ app/controllers/tests_controller.rb:30:in `block in create' Redirected to http://localhost:3000/tests/3 Completed 200 OK in 11ms (ActiveRecord: 7.1ms | Allocations: 2812) Started GET "/tests/3" for 127.0.0.1 at 2020-02-23 09:02:07 +0900 Processing by TestsController#show as HTML Parameters: {"id"=>"3"} Test Load (0.1ms) SELECT "tests".* FROM "tests" WHERE "tests"."id" = ? LIMIT ? [["id", 3], ["LIMIT", 1]] ↳ app/controllers/tests_controller.rb:67:in `set_test' Rendering tests/show.html.erb within layouts/application Rendered tests/show.html.erb within layouts/application (Duration: 0.2ms | Allocations: 80) [Webpacker] Everything's up-to-date. Nothing to do Completed 200 OK in 11ms (Views: 8.8ms | ActiveRecord: 0.1ms | Allocations: 5400)

イメージ説明


【Bの設定】
formの設定     : remote: true
Controllerの設定  : redirect_to tests_url(#indexへのリダイレクト)
show.js.erbの有無 : 無し


【Bの結果】
TestController#Createメソッドがjsで実行されている。(remote:true)
(通常であればshow.js.erbが実行されるはずだが)・・・・※ここが勘違い※
TestController#indexがHTMLで実行されている


【Bの実行結果】

Started POST "/tests" for 127.0.0.1 at 2020-02-23 09:08:31 +0900 Processing by TestsController#create as JS Parameters: {"authenticity_token"=>"ftWx2hZ5cqRIljWtE1IrhkaR3rD0iiE8LRopR7IIQW9F1UyWoRlNeA5INanmzPEAtO5+4arNnsKCkauLDDnpLA==", "test"=>{"name"=>"eeeeeeeeeeee"}, "commit"=>"Create Test"}  (0.1ms) begin transaction ↳ app/controllers/tests_controller.rb:30:in `block in create' Test Create (0.6ms) INSERT INTO "tests" ("name", "created_at", "updated_at") VALUES (?, ?, ?) [["name", "eeeeeeeeeeee"], ["created_at", "2020-02-23 00:08:31.398580"], ["updated_at", "2020-02-23 00:08:31.398580"]] ↳ app/controllers/tests_controller.rb:30:in `block in create'  (1.1ms) commit transaction ↳ app/controllers/tests_controller.rb:30:in `block in create' Redirected to http://localhost:3000/tests Completed 200 OK in 10ms (ActiveRecord: 1.8ms | Allocations: 3017) Started GET "/tests" for 127.0.0.1 at 2020-02-23 09:08:31 +0900 Processing by TestsController#index as HTML Rendering tests/index.html.erb within layouts/application Test Load (0.2ms) SELECT "tests".* FROM "tests" ↳ app/views/tests/index.html.erb:14 Rendered tests/index.html.erb within layouts/application (Duration: 4.9ms | Allocations: 1101) [Webpacker] Everything's up-to-date. Nothing to do Completed 200 OK in 37ms (Views: 34.9ms | ActiveRecord: 0.2ms | Allocations: 5930)

![イメージ説明]

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

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

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

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

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

guest

回答2

0

多分違います。
logかブラウザの検証で診てください。多分FATALして500が戻っているとおもいます、
そのformはindex.htmlにかかれているものではないですか?
indexにredirectしたのではなく、画面遷移しなかったもとのindexのまま、なのだと思います

投稿2020/02/22 12:53

winterboum

総合スコア23567

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

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

no1knows

2020/02/23 01:19

logの確認のアドバイスありがとうございます。 やっと自分の勘違いのポイントが分かったので、自己解決を追加させていただきます!
guest

0

自己解決

RailsでAjax通信を実施する場合には、postとget、それぞれを用途に応じて設定しなければいけなかった。

PostのAjax設定:remote: true

Scaffoldで作成したコントローラーを利用する前提で、remote: trueだけを設定した場合、下記のようになる。

Form ⇒ [Ajax] ⇒ Controller ⇒ [Turbolinks] ⇒ View

Post側はremote:trueのAjaxでデータを送信し、ViewはTurbolinksのAjaxで表示される。
理由は、Controllerでformat.html { redirect_to @test, notice: 'Test was successfully created.' }が呼ばれるため。

※管理者ツールのネットワークではページのリダイレクトがないので、一見するとpostもgetもAjax通信を行っているように見えるが、getは、TurbolinksのAjax通信なので要注意。

GetのAjax設定:format.js{****}

Scaffoldで作成したコントローラーを利用するとformat.htmlまたはformat.json形式しか設定がない。
今回はjsでの通信を行うため、双方を削除し、format.js{****}を追加。
Viewファイルにcreate.js.erbなどを追加する。
またPostのAjax設定は、remote: trueを利用する。

Form ⇒ [Ajax] ⇒ Controller ⇒ [Ajax] ⇒ View

これによりPostもGetもAjax通信が可能となり、ページ内の一部分だけの変更(シングルページでの非同期通信)が可能となる。

投稿2020/02/23 01:43

編集2020/02/23 01:45
no1knows

総合スコア3365

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問