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

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

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

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

Ruby on Rails 6

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

332閲覧

jqueryによるajaxがページを更新しないと読み込まれない

bignyokki

総合スコア10

Ruby

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

Ruby on Rails 6

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/03/19 03:16

実現したいこと

Ruby on railsでjQueryを使用してAjaxを実装したい

発生している問題・エラーメッセージ

indexからlinl_toで遷移してフォームを入力して送信すると
jqueryが実行されていない(ページに変化がない)
ただし、フォームのデーターはモデルに送られているようで、DBに保存されている
しかし、ブラウザの更新ボタンでページを更新して
同様にファームに入力して送信すると、ajaxが処理できており
htmlを挿入することができる

該当のソースコード

quotation.js

js

1$(function() { 2 console.log("イベント発火1"); 3 function createHTML(quotation) { 4 let html = `<div class="quotation" id="note${quotation.id}"> 5 <span class="quotation_title">${quotation.title}</span> 6 </div>` 7 return html; 8 }; 9 $("#quotation_input").on("submit", function(e) { 10 console.log("イベント発火2"); 11 e.preventDefault(); // デフォルトのイベント(HTMLデータ送信など)を無効にする 12 let formData = new FormData(this); // FormDataを作成 13 let url = $(this).attr("action"); // デフォルトのイベント(HTMLデータ送信など)を無効にする 14 $.ajax({ 15 url: url, // リクエストを送信するURLを指定 16 type: "POST", // HTTPメソッドを指定(デフォルトはGET) 17 data: formData, //FormDataをそのまま渡せば良い(必要な"note[body]"と"authenticity_token"を含む) 18 dataType: "json", // レスポンスデータをjson形式と指定する 19 processData: false, //FormDataを使用した場合に必要となる 20 contentType: false //FormDataを使用した場合に必要となる 21 }) 22 .done(function(data) { 23 let html = createHTML(data); // 受信したデータ(data)を元に追加するURLを生成(createHTML関数は冒頭で定義) 24 $(".quotation").append(html); // 生成したHTMLをappendメソッドでドキュメントに追加 25 // $(".quotation_form").remove(); 26 }) 27 .fail(function() { 28 alert("error!"); // 通信に失敗した場合はアラートを表示 29 }); 30 }); 31});

new.html.erb

html.erb

1<div class="quotation_form"> 2 <%= form_with(model: @quotation, id: "quotation_input") do |form| %> 3 <%# 顧客名は100件以上になるため、後でサジェスト機能を実装する%> 4 <%= form.label :client_id, "顧客名" %> 5 <%= form.collection_select(:client_id, @clients, :id, :name, include_blank: "選択してください" ) %> 6 <br> 7 <%= form.label :title, "タイトル" %> 8 <%= form.text_field :title %> 9 <br> 10 <%= form.label :charge, "ご担当" %> 11 <%= form.text_field :charge %> 12 <br> 13 <%= form.label :delivery_date, "納期" %> 14 <%= form.text_field :delivery_date %> 15 <br> 16 <%= form.label :expiration_date, "有効期限" %> 17 <%= form.text_field :expiration_date %> 18 <br> 19 <%= form.label :delivery_place, "受け渡し場所" %> 20 <%= form.text_field :delivery_place %> 21 <br> 22 <%= form.label :business_terms, "取引条件" %> 23 <%= form.text_field :business_terms %> 24 <br> 25 <%= form.label :total_price, "合計金額" %> 26 <%= form.text_field :total_price %> 27 <br> 28 <%= form.label :remarks, "備考" %> 29 <%= form.text_field :remarks %> 30 <br> 31 <%= form.submit "図面を追加する", id: "submit", class: "quotation_form-btn" %> 32 <% end %> 33</div>

quotatuons_controller.rb

ruby

1class QuotationsController < ApplicationController 2 3 def index 4 @quotations = Quotation.all 5 end 6 7 def new 8 @clients = Client.all 9 @quotation = Quotation.new 10 end 11 12 def create 13 @clients = Client.all 14 @quotation = Quotation.new(quotation_params) 15 if @quotation.save 16 render json: {client: @quotation.client.name, title: @quotation.title, id: @quotation.id } 17 else 18 render :new 19 end 20 end 21 22 private 23 24 def quotation_params 25 params.require(:quotation) 26 .permit(:client_id, :title, :charge, :delivery_date, :expiration_date, 27 :delivery_place, :business_terms, :total_price, :remarks) 28 .merge(user_id: current_user.id) 29 end 30 31 32end

index.html.erb

ruby

1<h1>見積書一覧</h1> 2 3<%= link_to '新規登録', new_quotation_path %>

試したこと

  • ターミナルを確認するとJSが返ってきている

Started POST "/quotations" for ::1 at 2022-03-19 12:03:49 +0900
Processing by QuotationsController#create as JS

  • form_withにlocal: trueをつけて送信するとhtmlが返ってきている(ページ更新して送信するとajaxでできる)

Started POST "/quotations" for ::1 at 2022-03-19 12:07:57 +0900
Processing by QuotationsController#create as HTML

  • ajaxが成功したときにはjsonが返ってきている

Started POST "/quotations" for ::1 at 2022-03-19 12:11:36 +0900
Processing by QuotationsController#create as JSON

  • quotation.js のconsole.log("イベント発火1")は表示され、console.log("イベント発火2")は表示されない

補足情報(FW/ツールのバージョンなど)

Rails 6.0.4.6

全然動かないならともかく、ブラウザを更新したら動くので諦めかつかず、そこで何が違うのかずっと調べているのですが
1週間ずっと解決できません。助けてください。
必要な情報あれば教えてください。

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

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

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

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

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

guest

回答1

0

自己解決

解決しました。
Turbolinksに原因があったようです。
発生時いろいろ調べたつもりでしたが全く解決できなかったのに
今回全く別件を調べていた時に偶然見つけました。
https://qiita.com/nakachan1994/items/974f1d3c17d43446acb9

投稿2022/04/21 14:43

bignyokki

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問