🦔

コメント機能の非同期化での学び

2023/08/22に公開

はじめに

2か月目のフェーズ時にはできていたコメント非同期がリロードしないといけない状態になってしまったので、メンター質問しました。
その時に教えてもらった便利なメソッドについてまとめました。

Ajaxでエラーや反応しない場合の最初の対処法

Ajaxでエラーや反応しない場合デバックツールをしようし、console欄を確認する。

Ajax関連のエラーがある場合このような表示が出る。

ちなみに1つ目のエラーは~.js.erbファイルの変数に@がないからです。
jsファイルはコントローラーのアクションを呼び出すので、@が必須になるらしい。
それに加えて、redirect_backをコメントアウト(削除)していないことが原因になります。

2つ目のエラーはundefined method `id' for nil:NilClassが原因とターミナルに表示されています。
これはrenderを記入した<div></div>に対してidが付与されていないからなのでidを付与してそれを.jsファイルに記述すれば良いです。

appendメソッドについて

append()メソッドは、指定した要素内の最後に引数のコンテンツを追加するメソッドです。
コンテンツにはテキストの他、HTML要素やJQueryオブジェクトが指定できます。
append()の基本的な書き方は以下の通りです。

$(‘セレクタ’).append(‘コンテンツ’)

コメント機能を非同期通信する時に使用したコードを例にします。
省略部分にはコメントの一覧表示のコードが入ります。

_post_comments.html.erb
<div id="commentWrapper">
  <% post_record.comments.each do |post_comment| %>
    <div id="comment_<%= post_comment.id %>">
   <#省略>
    </div>
</div>
create.js.erb
$('#commentWrapper').append(`
  <div id="comment_<%= @comment.id %>">
   <#省略>
`);
$("textarea").val('');

$("textarea").val('');はコメントが投稿された後、非同期で入力フォーム内が空になるように記述しています。

参考にさせていただいた記事

https://qiita.com/yuuki-h/items/7a7e5b6607a0b93c093c
https://www.bold.ne.jp/engineer-club/jquery-append

まとめ

javascriptはまだ内容理解が足りていないので、近日中に内容確認の機会を作る必要がありそうです。うまく実装できないことが多いので、苦手意識がついてしまったのでそれも払しょくしていきたいです!!

Discussion