コメント編集機能のajax化

前提・実現したいこと

railsを使いアプリを作成中です。
Ruby 2.6.4
Rails 5.2.3
Node.js v12.14.0
Yarn 1.22.4

コメント編集機能をajax化したい。
コメント更新ボタンを押すとajaxの処理が呼ばれるように実装したいです。

発生している問題・エラーメッセージ

コメント編集内容をrails側に送るとができていない。
更新ボタンを押し、リロードをするとupdateアクションにリクエストを飛ばすことはできているが変更した内容は送ることができていない。

エラーメッセージ

該当のソースコード

app/assets/javascripts/comment.js

ソースコード
$(function() {
  $(document).on("click", ".js-edit-comment-button", function () {
    const commentId = $(this).data("comment-id")
    const commentLabelArea = $("#js-comment-" + commentId)
    const commentTextArea = $("#js-textarea-comment-box-" + commentId)

    commentLabelArea.hide()
    commentTextArea.show()
    return false
  })
  
  $(document).on("click", '.js-button-edit-comment-cancel', function() {
    const commentId = $(this).data("comment-id")
    const commentLabelArea = $("#js-comment-" + commentId)
    const commentTextArea = $("#js-textarea-comment-box-" + commentId)

    commentLabelArea.show()
    commentTextArea.hide()
  })

※ 該当の更新ボタンの実装
  $(document).on("click", '.js-button-comment-update', function() {
    const commentId = $(this).data("comment-id")
    const commentText = $("#js-textarea-comment" + commentId)
    const body = commentText.val()
    console.log(body)

    $.ajax({
      type: 'PATCH',
      url: '/comments/' + commentId,
      data: {
        comment: {
          body: body
        }
      }
    })
  })
})




app/views/comments/_comment.html.erb

<tr id="comment-<%= comment.id %>">
  <td style="width: 60px">
    <%= image_tag 'board_placeholder.png', :size => '50x50', class: 'rounded-circle' %>
  </td>
  <td>
    <h3 class="small"><%= comment.user.decorate.full_name %></h3>
    <div id="js-comment-<%= comment.id %>">
      <%= simple_format(comment.body) %>
    </div>

※ 該当の更新内容の実装
    <div id="js-textarea-comment-box-<%= comment.id %>" style="display: none;">
      <textarea id="js-textarea-comment-<%= comment.id %>" class="form-control mb-1"><%= comment.body %></textarea>
      <button class="btn btn-light js-button-edit-comment-cancel" data-comment-id="<%= comment.id %>">キャンセル</button>
      <button class="btn btn-success js-button-comment-update" data-comment-id="<%= comment.id %>">更新</button>
    </div>
  </td>

  <% if current_user.own?(comment) %>
    <td class="action">
      <ul class="list-inline justify-content-center" style="float: right;">
        <li class="list-inline-item">             
          <a href="#" class='js-edit-comment-button' data-comment-id="<%= comment.id %>">
            <%= icon 'fa', 'pen' %>
          </a>
        </li>
        <li class="list-inline-item">
          <%= link_to comment_path(comment), class: 'js-delete-comment-button', data: { confirm: '削除してよろしいですか？' }, method: :delete, remote: true do %>
            <%= icon 'fas', 'trash' %>
          <% end %>
        </li>
      </ul>
    </td>
  <% end %>
</tr>

試したこと

binding.pryでupdateアクションまでリクエストを飛ばすことはできる。(更新ボタンを押してリロードをすれば)

chrome の検証ツールを使いデバックしたところ commentText.val() のコードは undefind と返ってくる。

$("#js-textarea-comment" + commentId)のコードの結果は、
jQuery.fn.init {context: document, selector: "#js-textarea-comment71"}と表示される。

上の二つのコードに問題があると思っているのですが、そこから何をすれば良いかわからない状態です。

補足情報（FW/ツールのバージョンなど）

コメント編集機能はまだ実装途中で、現段階ではコメントの編集内容を更新ボタンでupdateアクションへ送れるようにすることを目標にしています。

m.ts10806

2020/08/24 00:11

「rails側に送るとができていない」確認はどのようにされたのでしょうか。

no1knows

2020/08/24 00:36

コメント機能を実装したことがないのですが・・・ Ajaxをjavascriptで実装しているのを見ると、せっかくRailsを使っているのならremote:trueで実装すればいいのにと、いつもいつも思ってしまうのですが、remote:trueでは実装できないのでしょうか？と質問した方に質問しても仕方ないのですが・・・参考：Railsガイド　シンプルな例を応用した感じです。 https://railsguides.jp/working_with_javascript_in_rails.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E8%80%83%E6%85%AE%E3%81%99%E3%81%B9%E3%81%8D%E7%82%B9

退会済みユーザー

2020/08/24 03:11

rails側でpryを実行したところ送られてほしいbodyの内容が送れていませんでした。

退会済みユーザー

2020/08/24 03:16

スクールの課題になっており、remote:true を使わずajax関数での実装という指示が出されています。