［Rails5］［Ajax］［jQuery］createアクションが動いていない。@post.saveできない。

Question

#非同期処理の新規投稿を実現したい
Ajax通信とは？？という状態から実装しながら覚えていこうとしているので、うまく現状おきていることも伝えられていないかもしれませんが、ご教授下さい。

Rails5.2, jQuery を使用しています。
モデル Post の新規投稿をAjaxでページ遷移せずに作成したいです。
Railsで投稿の非同期(Ajax)こちらのQiitaの記事を参考にコードを書いてみました。

#困っていること
フォームに入力した文字を投稿一覧画面に表示させることはできていますが、createアクションの@post.saveができていないようで、実際には投稿できていません。入力した文字をただブラウザ上に表示しているだけになっています。

#実際のコード

routes.rb

Rails.application.routes.draw do
...省略
  resources :posts, :only => [:index, :show, :new, :create, :destroy]
...省略
end

posts_controller.rb

class PostsController < ApplicationController
  before_action :login_required, {only: [:index, :show]}

  def index
    @post = Post.new
    @posts = Post.all.order(created_at: "DESC")
  end

...省略...

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    @post.save
    render :json => @post.content
  end

...省略...

  def post_params
    params.require(:post).permit(:content, :user_id, :image)
  end
end

posts/_form.html.slim

  = form_with model: @post do |f|
    .form
      = f.text_area :content, rows: 3, class: "form-control"
    .form
      = f.file_field :image, class: "form-control-file"
    .form
      = f.submit "投稿する", class: "form_submit"

posts/index.html.slim

  h3.index_title みんなの投稿

  = form_with model: @post do |f|
    .form
      = f.text_area :content, rows: 3, class: "form-control"
    .form
      = f.file_field :image, class: "form-control-file"
    .form
      = f.submit "投稿する", class: "form_submit"


  #post_list_wrapper
    - @posts.each do |post|
      #index_list"
        p= post.content

assets/javascript/application.js

...省略...

$(function() {
  $(document).on('ajax:success', 'form', function(e) {
    $('#post_list_wrapper').prepend('<div id="index_list">'+'<p>' + e.detail[0] + '</p>')+"</div>";
  })
})

#アドバイスお願いいたします
なぜ投稿が表示だけされて、保存されないのかわからず、お手上げです。どうかお助け下さい。ご回答宜しくお願いします。

Answer 1

.saveを返り値のチェック無しで使ってはいけません。今回のように、エラーが起きても無視されてしまいます。

.save!とすると、保存に失敗したときには例外が起きるようになりますので、例外の内容を見て、どう改良すべきかの判断もできるようになります。

Comments

[uk_63]

>> maisumakun さん

ご回答ありがとうございます。

.save!に変更したところ、
検証画面のConsoleに下記のエラーが表示されました。
↓↓↓↓↓↓
Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

また、サーバーログには下記エラーが表示されました。
↓↓↓↓↓↓
Started POST "/posts" for 127.0.0.1 at 2018-12-19 16:56:54 +0900
Processing by PostsController#create as JS
Parameters: {"utf8"=>"✓", "authenticity_token"=>"de81frcb1hEbv3Cv3Hb41BlmoEyXwl8L1Td8YAr9B+L2qwVo3t/VgY+g+ERerEtM9zEfC/kOovqUOh1+AlTEyA==", "post"=>{"content"=>"こんにちは"}, "commit"=>"投稿する"}
User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 8], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:5
(0.2ms) BEGIN
↳ app/controllers/posts_controller.rb:20
(0.2ms) ROLLBACK
↳ app/controllers/posts_controller.rb:20
Completed 422 Unprocessable Entity in 12ms (ActiveRecord: 0.8ms)

ActiveRecord::RecordInvalid (Validation failed: User can't be blank, User must exist):

app/controllers/posts_controller.rb:20:in `create'

これは、つまり新規投稿とuserを紐付けられたら、エラー解消ということですか？
もしそうであれば、その方法をアドバイスいただけますでしょうか？

宜しくお願いします。

[maisumakun]

そうですね、Ajaxで投げたデータにuser_idがないのが要因かと思います（ログイン中のアカウントと紐付ける場合はコントローラーでの処理が必要となります）。

[uk_63]

>> maisumakun さん

新規投稿とユーザを紐付ける事によって、投稿にせいこうしました。
アドバイス、ありがとうございました。