Rails 비동기 통신 (ajax)

기사에 주석을 구현합니다.
리로드하지 않으면 투고한 코멘트가 표시되지 않는 상태였으므로 ajax로 구현했습니다.

기사에 표시는 tops_controller.rb코멘트도 이 안의 액션에 기술하고 있습니다.

완성형

어소시에이션

article.rb

  has_many :comments, dependent: :destroy

comment.rb

  belongs_to :article

댓글 만들기

tops_controller.rb

  def show
    @article_id = Article.find(params[:id]) #記事id取得
    @comment = Comment.new　#コメント作成
    @comments = @article_.comments　　#記事に紐づくコメント全取得
    # @comments = Comment.where(article_id: @article_id) 上と同じ意味(書かなくていい)
    session[:article_id] = @article_id.id #sessionに格納して次のアクションでも使えるように
  end

  def create
    @article_id = Article.find_by(id: session[:article_id])　　#記事id取得
    @comment = Comment.new(comment_params)  #コメント作成
    @comment.article_id =  @article_.id #アソシエーションしてるのでarticle_idを指定

    if @comment.valid? #バリデーションひっかってるか確認
       @comment.save　#大丈夫そうだったら保存
       @comments = []　#空配列を定義
       @comments << @comment #@commentsに今作った@commentをpush・・・comment_lists.html.erbで使う
       render :comment_lists　(アクションは必要ない（このファイルのjs.erbファイルを作る）)
    else
      render :action => "show"
    end
  end

_comment_form.html.erb

<%= form_with model: [@article_id, @comment], :url => { :action => 'create' }  do |f| %>
#@article_idは記事ID取得の変数、@commentはコメント作成の変数
  <div class = "form">
    <div class="label">
      <%= f.label(:name)%>
    </div>
    <div class="parts clearfix">
      <%= f.text_field :name, :class => 'text' %>
    </div>
  </div>
  <div class = "form">
    <div class="label">
      <%= f.label(:email)  %>
    </div>
    <div class="parts clearfix">
      <%= f.text_field :email, :class => 'text' %>
    </div>
  </div>
  <div class = "form">
    <div class="parts clearfix">
      <%= f.text_area :content, :placeholder => "コメント内容", :class => 'text' %>
      <%= error_on(:comment, :content)%>
    </div>
  </div>

  <div class = btn_wrap>
    <%= f.submit "コメントする", :class => "check" %>
  </div>
<% end %>

comment_lists.html.erb

<% if @comments %>
  <% @comments.each_with_index do |comment,i| %>
    <div class="comment_box">
      <div class ="wrap">
        <div class = "id"><%= link_to "#{i+1}", new_reply_path %></div>
          <div class = "name"><%= comment.name %></div><br>
         <div class = "date"><%= comment.created_at.strftime("%Y/%m/%d %H:%M")%></div>
      </div>
      <div class ="content"><%= comment.content %></div>
    </div>
  <% end %>
<% end %>

comment_lists.js.erb

// 内容消してる
$('textarea').val('');
$('input').val(''); 

//コメント一覧に今作成したコメントを追加（動的に）
$('.comment_lists').append('<%= j(render 'comment_lists') %>'
);

참고 URL 2개를 참고에 써 있던 ↓에 달려 있다 collection: 에 기술하고 있는 변수는, 단지 comment_lists.html.erb 정의하고 있기 때문에 필요하지 않은 것 같습니다.

$('.comment_lists').append('<%= j(render 'comment_lists'), collection: @comments) %>');

참고 기사
@comments
htps : // ysk-p 여. 하테나 bぉg. 코m/엔트리/2018/02/10/101739