【rails】jQueryでコメント投稿フォームを表示する

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

jQueryでコメント投稿フォームを表示する

目次へ

jQueryでコメント投稿フォームを表示する

前回はコメント一覧のAPIを作成した

【rails】コメント一覧のAPIを作る

今回は、まず投稿フォームの表示のみできるようにしていく

viewのコードを変更する

articles/show.html.hamlを開く

現在は以下の記載になっている

.container
  = link_to new_article_comment_path(@article) do
    .btn-secondary
      コメントを追加

link_toはなくてもいいので、btn-secondaryをクリックしたら投稿フォームが現れるようにする

.container
  .btn-secondary
    コメントを追加
  .comment-text-area
    = text_area_tag :comment_content, '', class: 'sm'

テキストエリアを表示するためのヘルパーがrailsには用意されているので、text_area_tagを使う

テキストエリアに名前:comment_contentをつける
classはスモールという意味で'sm'としておく

（form.scssにsmのクラスを追加してのサイズを調整しておく）

これだけで投稿フォームを表示することができる

コメント投稿のボタンも増やす

単純に.btn-secondaryをそのままコピペして増やす

.container
  .btn-secondary
    コメントを追加
  .comment-text-area
    = text_area_tag :comment_content, '', class: 'sm'
    .btn-secondary
      コメントを投稿

before

after

やりたいこと

コメント追加でフォームを出す（普段は隠れている）
コメントを入力し、コメントを投稿を押す
コメント一覧にコメントを追加する

上記の一連の動作ができるようにしたい

投稿フォームのデフォルトは非表示

hiddenを追加して、普段は隠れているようにする

.container
  .btn-secondary
    コメントを追加
  .comment-text-area.hidden
    = text_area_tag :comment_content, '', class: 'sm'
    .btn-secondary
      コメントを投稿

投稿フォームを表示させる

btn-secondary「コメントを追加」を押す
comment-text-area.hiddenからhiddenをremoveする
コメント投稿フォームが表示される

上記のとおり、article.jsに書き加える

  $('.show-comment-form').on('click', () => {
    $('.show-comment-form').addClass('hidden')
    $('.comment-text-area').removeClass('hidden')
  })

#DAY7