LoginSignup
2
2

More than 3 years have passed since last update.

Rails 非同期通信(ajax)

Last updated at Posted at 2019-04-24

記事にコメントを実装します。
リロードしなきゃ投稿したコメントが表示されない状態だったのでajaxで実装しました。

記事に表示はtops_controller.rb
コメントもこの中のアクションに記述しています。

完成形
スクリーンショット 2019-04-25 0.32.10.png

スクリーンショット 2019-04-25 1.42.22.png

アソシエーション

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') %>'
);

参考URL2つめを参考にに書いていた↓にかいてあるcollection:に記述している変数は、ただcomment_lists.html.erbで使える編集を記述しているだけらしく、今回の場合コントローラに@commentsを定義しているからいらないらしい

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

参考記事
https://ysk-pro.hatenablog.com/entry/2018/02/10/101739
https://qiita.com/Yama-to/items/377f8a92cf30a3ebf454

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2