rails5で画面遷移しない投稿機能

Question

Rails5でAjaxを使って画面遷移をしない投稿機能を作りたいです。

https://ysk-pro.hatenablog.com/entry/2018/02/10/101739

上のサイトを参考に実装しているのですがうまくDBに保存できず困っています。

個人的にはjavascript(index.js.erb)が機能していないのではないかと思っているのですがその辺りもどうすればいいのか調べてもわかりません。

どなたかご教授いただけないでしょうか。

ローカル

views/index.js.erb

$("#comments_area").html("<%= (render 'index', { contents: @content.post.contents }) %>")
$("textarea").val('')

views/show.html.erb

<div class="comment">
    <h4>コメント</h4>
    <div id="comments_area"><!-- #① -->
      <!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'fc_contents/index', locals: { contents: @contents } %>
    </div>
    <% if user_signed_in? %>
      <!-- コメント入力欄をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'fc_contents/new', locals: { contents: @content, post: @post } %>
    <% end %>
 </div>

views/fc_contents/show.html.erb

<div class="comment">
    <h4>コメント</h4>
    <div id="comments_area"><!-- #① -->
      <!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'fc_contents/index', locals: { contents: @contents } %>
    </div>
    <% if user_signed_in? %>
      <!-- コメント入力欄をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'fc_contents/new', locals: { contents: @content, post: @post } %>
    <% end %>
 </div>

views/fc_contents/_new.html.erb

<%= form_with(model: [@post, @content] ) do |form| %>
  <div class="comment-textarea">
    <%= form.text_area :content_body %>
  </div>
  <div class="actions">
    <%= form.submit "コメントをする" %>
  </div>
<% end %>

views/fc_contents/_index.html.erb

<!-- <div class="main"> -->
<div class="btn btn-size-large">
  <!-- リンクにファンクラブのidを入れている -->
  <%= link_to("コンテンツを投稿する", "/fc_contents/new/#{@post.id}") %>
</div>

<!-- ファンクラブオーナーのタイムライン -->
<div class="orner-container">
  <!-- 現在のpostのコンテンツって意味 -->
  <% @post.contents.each do |content| %>
    <% if @post.user_id == content.user_id %>
    <li class="orner-timeline">
      <div class="content-member-img">
        <% if content.user_id %>
          <%= link_to image_tag("/user_images/#{content.user_id}.jpg"), "/home/profile/#{content.user_id}" %>
        <% else %>
          <img src="<%= "/default_image.jpg" %>">
        <% end %>
      </div>
        <%= link_to(content.content_body, "/fc_content/#{content.id}") %>
      </li>
    <% end %>
  <% end %>
</div>

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-right">
    <!-- メニューの部分 -->
    <div class="member-timeline-container">
      <!-- 現在のpostのコンテンツって意味 -->
      <% @post.contents.each do |content| %>
        <% if @post.user_id != content.user_id %>
          <li class="member-timeline">
            <div class="content-member-img">
              <% if content.user_id %>
                <%= link_to image_tag("/user_images/#{content.user_id}.jpg"), "/home/profile/#{content.user_id}" %>
              <% else %>
                <img src="<%= "/default_image.jpg" %>">
              <% end %>
              </div>
            <p class="content-id">投稿ID:<%= content.id %>   ユーザー:<%= content.user_id %>   <span class="created-at"><%= time_ago_in_words(content.created_at)%></span></p>
            <div class="member-timeline-body">
              <%= link_to(content.content_body, "posts/#{content.id}/fc_contents") %>
            </div>
          </li>
        <% end %>
      <% end %>
  </div>
</div>

<div id="content" class="snap-content">
  <!-- ドロワーメニューを開くボタン -->
  <a href="#" id="open-right">タイムライン</a>
  <!-- コンテンツ部分 -->
</div>
<script type="text/javascript">
// 基本的な記述です。コンテンツ部分のID名を書いておきましょう。
var snapper = new Snap({
  element: document.getElementById('content')
});

// 以下はフリックやドラッグだけでなく、ボタンでも開いたり閉じたりできるようにする記述です。
var addEvent = function addEvent(element, eventName, func) {
  if (element.addEventListener) {
      return element.addEventListener(eventName, func, false);
  } else if (element.attachEvent) {
      return element.attachEvent("on" + eventName, func);
  }
};

// ボタンのID名と揃えておきましょう。
addEvent(document.getElementById('open-right'), 'click', function(){
  snapper.open('bottom');
});
</script>

views/fc_contents_controller.erb

class FcContentsController < ApplicationController
  before_action :authenticate_user!

  def index
    @post = Post.find_by(id: params[:id])
    # ここでorderしてもダメだからfc_content.rbで書いている
    # @contents = FcContent.all.order(created_at: :desc)
    @content = FcContent.new
    @contents = @post.contents
  end

  def show
    @post = Post.find_by(id: params[:id])
    @content = FcContent.find_by(id: params[:id])
    @content = FcContent.new
    # @contents = @post.contents

  end

  def new
    @content = FcContent.find_by(id: params[:id])
    @post = Post.find_by(id: params[:id])

  end

  def create
    @post = Post.find_by(id: params[:id])
    # form_tagに@post.idを含ませて現在のfc.idを取得している
    @content = FcContent.new(content_body: params[:content_body],
                              user_id: current_user.id)
    if @content.save
    # リダイレクトの後にpost.idがついたurlに戻る
    redirect_to("/fc_contents/index/#{@post.id}")
    render("index")

    else
      render("new")
    end
  end

  private
    def content_params
      params.require(:content).permit(:content_content_body, :post_id, :user_id)
    end
end

Answer 1

ストロングパラメーターの問題な気がします。
fc_contents_controller.rbのprivateのところに

private
  def fccontent_params
    params.require(:fc_content).permit(:content_body)
  end
end

をつけて

  def create
    @post = Post.find_by(id: params[:id])
    # form_tagに@post.idを含ませて現在のfc.idを取得している
    @content = FcContent.new(content_body: fccontent_params[:content_body],
                              user_id: current_user.id)

に変更

Comments

[akiakiakirin]

回答ありがとうございます！
上記の通りに直して試したのですが画像のようなエラーが出てしまいます。
fc_contents_pathが定義されていないということですがこれがどこを直せばいいのでしょうか？