77712


**環境**

ruby 2.7.2  
rails 6.1  
macOS

**前提**

下記の記事を参考に、非同期でのコメント投稿機能を実装いたしました。

[[Rails]
Ajaxを用いて非同期でコメント機能の実装](https://qiita.com/yuto_1014/items/c7d6213139a48833e21a)

**解決したいこと**

コメント投稿機能を非同期で実装させたいです！

**試したこと**

renderで問題が発生しているため、`render :index`を仮で`redirect_to
root_path`と変更した所、rootページへ遷移しました。  
また、削除機能でも`render :index`を使用しているのですが、削除は正常に動作しています。

エラー文をググり、下記の参考記事を試してみたのですが、同じエラーが表示されてしまいました。

[Rails
responseにrenderでjsファイルを返すには](https://qiita.com/hmuronaka/items/d7b6afa3cd62dfe207b4)

どのようにすればいいのか検討がついていない状態です。  
わかる方がいましたらアドバイスいただけると幸いです。  
何卒よろしくお願いします。

**発生している問題・エラー**

コメント投稿後、下記のエラー文が表示されてしまい、正常に動作していない状況です。

[![画像の説明をここに入力](https://i.stack.imgur.com/7zamW.png)](https://i.stack.imgur.com/7zamW.png)

**該当するソースコード**  
`travel_records_controller.rb`

[code]

      def show
        @travel_record = TravelRecord.find(params[:id])
        @user = @travel_record.user
        # コメントの作成
        @comment = Comment.new
        # 新着順で表示
        @comments = @travel_record.comments.order(created_at: :desc)
      end
    
[/code]

`comments_controller.rb`

[code]

    class CommentsController < ApplicationController
      def create
        @travel_record = TravelRecord.find(params[:travel_record_id])
        #投稿に紐づいたコメントを作成
        @comment = @travel_record.comments.build(comment_params)
        @comment.user_id = current_user.id
        @comment.save
        render :index
      end
    
      def destroy
        @comment = Comment.find(params[:id])
        @comment.destroy
        render :index
      end
    
      private
        def comment_params
          params.require(:comment).permit(:comment, :user_id, :travel_record_id)
        end
    end
    
[/code]

`index.js.erb`

[code]

    $("#comments_area").html("<%= j(render 'index', { comments: @comment.travel_record.comments }) %>");
    $("textarea").val('');
    
[/code]

`travel_records/show.html.slim`

[code]

    = render 'layouts/flash_messages'
    #comments_area
      = render 'comments/index', comments: @comments
    
[/code]

`comments/_index.html.slim`

[code]

    = comments.count
    | 件のコメント
    h6.more[data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"]
      | もっと見る....
    - comments.first(2).each do |comment|
      - unless comment.id.nil?
        p = link_to "@#{comment.user.name}", user_path(comment.user.id)
        p
          | コメント：
          = comment.comment
          - if comment.user == current_user
            = link_to travel_record_comment_path(comment.travel_record_id, comment.id), method: :delete, remote: true do
              i.fas.fa-trash[style="color: black;"]
        span = comment.created_at.strftime('%Y/%m/%d %H:%M:%S')
    #collapseExample.collapse
      - comments.offset(2).each do |comment|
        - unless comment.id.nil?
          p = link_to "@#{comment.user.name}", user_path(comment.user.id)
          p
            | コメント：
            = comment.comment
            - if comment.user == current_user
              = link_to travel_record_comment_path(comment.travel_record_id, comment.id), method: :delete, remote: true do
                i.fas.fa-trash[style="color: black;"]
          span = comment.created_at.strftime('%Y/%m/%d %H:%M:%S')
    
    
[/code]

`comments/_form.html.slim`

[code]

    = form_with model: [travel_record, comment], url: travel_record_comments_path(travel_record) do |f|
      = f.text_area :comment
      = f.submit "コメントする", class: 'btn btn-primary btn-block'
    
[/code]


CC BY-SA 4.0
2021-06-22T11:12:15.217
77709
2021-06-23T01:29:59.313
2021-06-23T01:28:07.387
3060
46968
question
javascript ruby-on-rails ruby jquery
Ajaxを用いて非同期でコメント機能を実装したのですが、コメント投稿後、render処理でTemplate is missingエラーが表示されてしまう


下記の参考記事をもとに自己解決できたので情報共有します。

[【Rails
6】（初心者向け）Ajax版最小構成CRUDアプリ（ページ移動をゼロに！）](https://qiita.com/take18k_tech/items/7d4917e30d4c879701ef)

結論：Rails 6.1 から仕様が変わり， `local: true`がデフォルトになったため、`js.erb`を呼び出すには
`form_with`に`local: false`の記述が必要。

上記通り、コードを変更したことで、正常に動作させることができました！


CC BY-SA 4.0
2021-06-22T13:18:25.577
77712
2021-06-23T01:29:59.313
2021-06-23T01:29:59.313
3060
46968
77709
answer