投稿フォームを非同期で行いたいです。

Question

やりたいこと

下記のような投稿フォームで、

ユーザーが「投稿内容」は書いたが、
「タイトル」は書き忘れたまま送信してしまった、という場合に
「投稿内容」が消えないまま引き継いでほしいと考えております。

'dogs#item',viewの中に
<%= render 'shared/micropost_form',micropost: @micropost %>
と記述されており、フォームのviewがあります。

  def item
  @user = current_user
    if logged_in?
        @micropost  = current_user.microposts.build
    end
  end

[shared/micropost_form]

<%= form_for([@food,@micropost], remote: true) do |f| %>
  <div class="form-group">
    <%= f.text_field :title, class:"border form-control", placeholder: "タイトル" %>
  </div>
  <div class="field form-group">
    <%= f.text_area :content, class:"border form-control", placeholder: "わんちゃんたちのために、ぜひ正直なレビューをお願いします！"%>
  </div>
  <div class="text-center">
    <%= f.submit "投稿する", class: "btn btn-primary" %>
  </div>
<% end %>

  def create

    @micropost = current_user.microposts.build(micropost_params)
      if  @micropost.save
          flash[:success] = "投稿が完了しました!。"
          redirect_to root_url
      else
        flash[:danger] = '入力していない項目があります'
          respond_to do |format|
            format.html { redirect_to request.referrer || root_url }
            format.js
          end
      end

  get    '/dogs/:dog_id/:id',   to: 'dogs#item', as: 'dogfood'
  post   '/dogs/:dog_id/:id',   to: 'dogs#item'
  resources :foods do
   resources :microposts,          only: [:create, :destroy]
  end

試したこと

下記のjsファイルを作成し実行したところエラーが起きました。
rederに対してエラーが起きる原因が分からず停滞しております。

jsの書き方が悪いのかもしれませんが、よろしければご教授いただきたいです。

ファイル名[create.js.erb]

$("#new_micropost").html("<%= escape_javascript(render 'shared/micropost_form',  %>");

undefined method `render' for #<#Class:0x00007f9c9d2648f0:0x00007f9c9e228890>

と書かれております。

どうかよろしくお願いいたします。

Answer 1

ユーザーが「投稿内容」は書いたが、「タイトル」は書き忘れたまま送信してしまった、という場合に

難しく考えずにValidationを利用したほうが良い気がします。
https://railsguides.jp/active_record_validations.html#presence

Comments

[kazuki0904]

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

現在Validationは既に利用してさせていただいており、存在した場合にsaveできるように設定してあります。
そして、もしsaveできなかった場合にもう一度viewを表示しているのですが、その時にユーザーが入力したものが消えてしまいます。

それともValidationを利用し、送信ボタンを押した後ではなく、送信ボタンを押す前にエラーを出すことができるといったことが可能なのでしょうか？

[no1knows]

適切にvalidationを設定していれば、送信ボタンを押す⇒エラーが表示される形となります。

一度、テスト用のアプリを作ってvalidationの動作確認していただいたほうが良いかと思います。（5分くらいで確認できるはずです。）

上から順にコマンドを実行。
rails new test-app
アプリができたら下記コマンドでディレクトリ移動
cd test-app
rails g scaffold post title:string content:text
rails db:migrate

models/post.rbに下記コードを追加
validates :title, :content, presence: true

rails sでアプリを起動後、http://localhost:3000/postsに移動。
画面下のnew postをクリックして、表示されたページでcreate postをクリック。
これでエラーが表示されるかと思います。

[no1knows]

あと非同期での作り方をきちんと把握したい場合は、下記が一番わかり易いかと思います。

https://railsguides.jp/working_with_javascript_in_rails.html#%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E4%BE%8B

これも一度、テストアプリを作ってみると、なるほどーと実感しやすいと思います。