【Rails, axios】form_withのデータをaxiosを使って表示させたいです。(解決済み)
解決したいこと
Railsのform_withで送られたデータをaxiosを使い、非同期通信で表示させること。
下記画像は非同期通信を用いずに投稿したもの。
発生している問題・エラー
answer.js:9 Uncaught ReferenceError: axios is not defined
at HTMLInputElement.<anonymous>
該当するソースコード
controllers/answers_controller.rb
class AnswersController < ApplicationController
before_action :authenticate_user!
def index
@answers = Answer.all.order(id: "DESC")
end
def create
@answer = Answer.create(answer_params)
render json:{post: answer}
end
private
def answer_params
params.permit(:answer).merge(user_id: current_user.id)
end
end
models/user.rb
class User < ApplicationRecord
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable
has_many :answers
end
models/answer.rb
class Answer < ApplicationRecord
belongs_to :user
validates :answer, presence: true
end
views/answers/index.html.erb
<h1>hello</h1>
<%= form_with url: answers_path, local: true, method: :post, id: "form" do |form| %>
<%= form.text_field :answer , id: "answer"%>
<%= form.submit '投稿する' , id: "submit" %>
<% end %>
<div id="list">
</div>
<% @answers.each do |ans| %>
<div class="post" data-id=<%= ans.id %>>
<div class="post-date">
投稿日時：<%= ans.created_at %>
</div>
<div class="post-content">
<%= ans.answer %>
</div>
</div>
<% end %>
answers.js
window.addEventListener("load", () => {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
const formData = new FormData(document.getElementById("form"));
console.log(formData)
e.preventDefault();
axios.answer('/answers', formData)
.then(function (res) {
console.log(res);
const item = res.data.post;
const list = document.getElementById("list");
const formText = document.getElementById("answer");
const HTML = `
<div class="post" data-id=${item.id}>
<div class="post-date">
投稿日時：${item.created_at}
</div>
<div class="post-content">
${item.answer}
</div>
</div>`;
list.insertAdjacentHTML("afterend", HTML);
formText.value = "";
});
});
})
試したこと
"[axios] axios の導入と簡単な使い方"
上記の記事を参考に下記コマンドを実行
npm install axios --save
【JavaScript】axiosでFormDataをPOST送信する方法-株式会社シーポイントラボ
記述は上記サイトを参考に記述した。
JavaScriptでよく見るエラーとその対策
①上記サイトの上から3つ目の事項より理由と原因はわかりましたが、問題の訂正箇所がわからずにつまずいております。
↓①抜粋
エラーの理由：変数名や関数名が定義されていない
よくある原因：名前の打ち間違え / ライブラリが読み込めていない
対策：名前を打ち間違えない / ライブラリをきちんと読み込む
Vue.jsを使った解決策でも助かります。何卒ご教授お願い致します。
0