javascriptのthisに苦しんだ。closestの使い方も間違っていた。ajax jquery
実現したいこと
口コミに対するコメント機能を非同期処理する
例えでいうと、返信機能つき掲示板にあたります。
私の以前のソースコードでは、1つの口コミにコメントをしているのに、複数の口コミにそのコメントが 反映されていました。(更新するとDBデータが表示されるため正常表示にはなる。) この問題を解決したく、テラテイルで質問したところ回答いただけました。
はじめに、以下が修正し直した成功時の例です。(まだバグは少しある。)
$(document).on('click','.koment',function(){ //function()のthisとdoneで使うthisは違うため変数に代入しておく var $_t = $( this ); $.ajax({ url:'/comment/comment', type:'POST', data:{ name: $(this).closest('#kom').find('#komname').val(), comment: $(this).closest('#kom').find('#komtext').val(), review_shop_id: $(this).closest('#kom').find('#review_shop_id').val(), review_id: $(this).closest('#kom').find('#review_id').val(), created_at: new Date() }, dataType: 'json' }) // Ajax通信が成功したら発動 .done(function(data, dataType){ $_t.closest('li').find('.komlist').prepend( '<li class="r-list">'+ '<div class="r-detail">'+ '<p class="r-name">'+ data['name'] +'</p>'+ '<p class="r-date">'+ data['created_at'] +'</p>'+ '<div class="r-body">'+ data['comment']+ '</div>'+ '</div>'+ '</li>' ) }) });
テラテイルで学んだことは、
var $_t = $( this );
と $_t.closest('li').find('.komlist').prepend(
の2つです。
1つ目
doneでthisを使うため変数に入れておくための
var $_t = $( this );
にします。
なぜかというとfunction()のthisとdone{}で使うthisは違うものだそうです。
試しに$(this).closest('li').find('.komlist').prepend(
と書いてみたところやはり動きませんでした。jsのthisに関してはもう少し掘り下げていこうと思いました。
2つ目
closestの選択要素を間違って認識してました。
以前の間違っていたコード
$_t.closest('.replyList').find('.komlist').prepend()
closestは開始要素から最も近い親要素を選択するものです。
しかし、私は兄弟要素であるものを選択していて、エラー文も出ないエラーで迷ってました。こちらもテラテイルで知ったことです。
テラテイル感謝です本当に