コメントの編集ボタンをajax化した際にはまったこと

こんにちは、くになかです。

学習したことの備忘録を書いて行きたいと思います。

はじめに

コメントの編集ボタンのajax化した際にはまったので、それの備忘録を書いていきます。

スクールの講師に質問して、問題が起きた際の解決の流れがなんとなく分かったので忘れないように書いておきます。

問題としては、コメントの編集ボタン押下時に、コメントは非表示になるのですが、テキストエリアが表示されないということが起きていました。

試してみたこと

debuggerを使って、検証ツールで確認してみたところ、commentIdの値は取得できました。

app / assets / javascipts/edit_content.js

$("#js-comment-" + commentId).hide();
$("#js-textarea-comment-box-" + commentId).show();

手前の$("#js-comment-" + commentId).hide();を単体で実行してみたところ、コメントを非表示にすることが出来ました。

次に$("#js-textarea-comment-box-" + commentId).show();を単体で実行してみると、テキストエリアを表示することが出来ました。

分かったこと

以上のことから、$("#js-textarea-comment-box-" + commentId).show();の処理の記載には問題がないので、サンプルコードと課題のアプリではHTMLの構成に違いがあることがわかりました。

HTMLを確認してみたところ、上記のようにjs-comment-73が外側のtrタグにもあるので、フォームもまとめて非表示になっている事がわかりました。

解決策

これらのことから、課題のアプリのtrタグのidを、”js-comment-<%= comment.id %>"から"comment-<%= comment.id %>”に変更したところ、フォームが正しく表示されるようになりました。

まとめ

どこまで処理ができているのかという点をできる限り具体化するために、処理の順番を変えてみたり、単体で実行してみたりすることで、正しく動作するか確認してみることが大切だと思いました。

以上です。最後まで読んでいただきありがとうございます。