【Ruby】掲示板アプリで非同期通信をしたい

Question

前提・実現したいこと

Ruby on Rails 6.0.0で掲示板アプリを作っています。
非同期通信でコメントを投稿できるようにしたいです。
アドバイスを頂けると嬉しいです。

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

アプリのコンソールで表示されます。
post.jsの8行目XHR.send(formData);でエラーが出ている状況です。

POST http://localhost:3000/topics/posts 404 (Not Found)
(anonymous) @ post.js:8

ターミナルにはルーティングエラーが表示されます。

ActionController::RoutingError (No route matches [POST] "/topics/posts"):

該当のソースコード

・JavaScript/post.js

function post() {
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("form"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/topics/posts", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.post;
      const list = document.getElementById("list");
      const formText = document.getElementById("comment");
      const HTML = `
        <div class="post">
          <span class="name">
            <%= "名無し" %>
          </span>
          <span class="time">
            ${item.created_at}
          </span>
          <p class=comment>
            ${item.comment}
          </p>
        </div>`;

      list.insertAdjacentHTML("afterend", HTML);
      formText.value = "";
    };
    e.preventDefault();
  });
 }
 window.addEventListener("load", post);

・posts/index.html.erb

<h1><%= link_to 'トップページ', root_path, class:"top-page" %></h1>

<div>
  <h3><%= @topic.title %></h3>
</div>

<% @posts.each do |post| %>
  <div class="post">
    <span class="name">
      <%= "名無し" %>
    </span>
    <span class="time">
      <%= post.created_at %>
    </span>
    <p class=comment><%= post.comment %></p>
  </div>
<% end %>

<div id="list">
</div>

<%= form_with(model: [@topic, @post], id: "form" ) do |f| %>
  <div class="form-input">
    <div>
      <%= f.text_area :comment, class: 'form-comment', id: "comment" %>
    </div>
  </div>
  <%= f.submit '投稿する', class: 'form-submit', id: "submit" %>
<% end %>

・controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @post = Post.new
    @topic = Topic.find(params[:topic_id])
    @posts = @topic.posts
  end

  def create
    @topic = Topic.find(params[:topic_id])
    @post = @topic.posts.new(post_params)
    if @post.save
      render json:{ post: @post }
    else
      @posts = @topic.posts
      render :index
    end
  end

  private
 
  def post_params
    params.require(:post).permit(:comment)
  end
end

・config/routes.rb

Rails.application.routes.draw do
  root to: 'topics#index'
  resources :topics, only: [:index, :new, :create] do
    resources :posts, only: [:index, :create]
  end
end

・models/post.rb

class Post < ApplicationRecord
  belongs_to :topic

  validates :comment, presence: true
end

・models/topic.rb

class Topic < ApplicationRecord
  has_many :posts

  validates :title, presence: true
end

Answer 1

routesがnestしていますので、"/topics/posts"　というpathはありません。
"/topics/topicのID/posts"　というpathです。
form_with(model: [@topic, @post] の @topicの情報を渡してください

Comments

[yasunsun]

回答ありがとうございます。
`rails routes`でパスを確認し、`/topics/:topic_id/posts`に変更しました。
しかし、同じようにエラーが表示されます。
他にも教えていただけると幸いです。

[winterboum]

:topic_id　ではなく、そのtopicの id （数字）を入れるです

[yasunsun]

回答ありがとうございます。
非同期通信で投稿できました。
１つの特定のidだけではなく、どのidでも対応できる記述はないでしょうか？

[winterboum]

@topicのidをhidden_field_tag でもつかって埋め込んでおき、それを読んで合成してください

[yasunsun]

回答ありがとうございます。
hidden_field_tagを使って実装しました。

・posts/index.html.erb
24行目に記述
<%= hidden_field_tag :topic_id, @topic.id %>

・post.js
4行目に記述
const topicId = submit.getAttribute("topic_id");
7行目
XHR.open("POST", `/topics/${topicId}/posts`, true);

しかし、/topics/null/posts 404 (Not Found)のエラーが表示されます。
topic_idがnullになります。
hidden_field_tagの記述場所が間違っているのでしょうか？

[winterboum]

topicId = submit.getAttribute("topic_id")
これ３がおかしいでしょう。submitですか？？

[yasunsun]

回答ありがとうございます。
おっしゃる通り、submitだと
<%= f.submit '投稿する', class: 'form-submit', id: "submit" %>
の中からしかidが取得できないと思いました。

<%= form_with(model: [@topic, @post], id: "form" ) do |f| %>の中にhidden_field_tagがあるので、id: "form"の部分を使うのでしょうか？

[winterboum]

ID が topic_id である要素の値を取って来るのです

[yasunsun]

回答ありがとうございます。
以下のように変更しました。

・posts/index.html.erb　8行目
<div class="post" data-id = <%= @topic.id %>>

・post.js　4, 5行目
const posts = document.querySelectorAll(".post");
const topicId = posts.getAttribute("data-id");

クラスのpostを取得して、そこからdata-idを取得しようと試みました。
しかし、posts.getAttribute is not a functionのエラーが表示されます。
data-idを取得するにはどうすればよいでしょうか？

[winterboum]

もうひとつの方に書きましたのでそちらを

Answer 2

自己解決できました。

変更後
・posts/index.html.erb
23行目

<div class="form-input", id="post" data-id = <%= @topic.id %>>

・post.js
4,5行目
const posts = document.getElementById("post");
const topicId = posts.getAttribute("data-id");

投稿画面に遷移するリンクのturbolinksはfalseにしました。
・参考サイト
https://qiita.com/avicii2314/items/df6d2a90aeff127d4fc0

Answer 3

自己解決できました。

変更後
・posts/index.html.erb
23行目

<div class="form-input", id="post" data-id = <%= @topic.id %>>

・post.js
4,5行目

const posts = document.getElementById("post");
const topicId = posts.getAttribute("data-id");

投稿画面に遷移するリンクのturbolinksはfalseにしました。
・参考サイト
https://qiita.com/avicii2314/items/df6d2a90aeff127d4fc0