jqueryでdivの子要素を見つけてhtmlを更新します

Question

jqueryを使用して新しいコメントをブログ投稿に更新しようとしています。 jqueryの

<div class="card-block" id="comments_{{$i->id}}"> 
    <p class="card-text"><a href="#">{{$i->user->username}}</a> {{$i->description}}</p> 
    <hr> 
    <div class="card_block"> 
     <form id="post_{{$i->id}}" class="dynamic-form" style="display:none" method="post" action="/comment/add"> 
      <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
      <input type="hidden" name="post_id" value="{{ $i->id }}"> 
      <div class="form-group" id="DynCommentInput"> 
       <textarea required="required" placeholder="Enter comment here" name="body" class="form-control"></textarea> 
      </div> 
      <input type="submit" name='post_comment' class="btn btn-success" value="Post"/> 
     </form> 
    </div> 
    <p class="card-text new_comment_{{$i->id}}" style="display:none"></p> 
    @if($i->comments) 
     @foreach($i->comments as $c) 
      <p class="card-text"><a href="#">{{$c->author->username}}</a> {{$c->body}}</p> 
     @endforeach 
    @endif 
</div> 

と、この：

jQuery(function ($) { 
    $(document).ready(function() { 

     $("body").on("submit", ".dynamic-form", function (e) { 

      var id = $(this).attr('id'); 
      var new_comment_id = '.new_comment_' + id; 
      var comments_id = '#comments_' + id; 
      var form = $(this); 

      $.ajax({ 
       url: form.prop('action'), 
       type: 'post', 
       dataType: 'json', 
       data: $(this).serialize(), 
       success: function (data) { 

        var resultStr = ""; 

        resultStr = resultStr + "<a href=\"#\"><\/a>" + data.body ; 

        console.log(resultStr); 

        $(comments_id).find(new_comment_id).html(resultStr).slideToggle(150).promise().done(function() { 
         $(new_comment_id).fadeIn("fast"); 
        }); 
       } 
      }); 
      e.preventDefault(); 
     }); 
    }); 
}); 

後者はclass="card-text new_comment_{{$i->id}}"とページ内<p>要素でresultStrを挿入する必要がありますが、私は新しいポストのために提出]をクリックすると何も起こりません、私のHTMLは次のように設定されています。 console.log(data);は、渡されたポストを示しているので、コントローラーの問題ではなくそのjqueryコードです。

Answer 1

あなたはそれがクラスを一致するようにnew_comment_idの先頭に.が欠落している（そしてこのnew_comment_classを呼び出すことが明確ではないでしょうか？）。

var new_comment_id = '.new_comment_' + id; 

もう一つの問題は、フォームのIDがpost_##であるということですので、あなたは、それぞれ、#comments_post_##と.new_comment_post_##からcomment_idとnew_comment_idを設定しています。 idを設定するときは、post_接頭辞を削除する必要があります。

var id = this.id.replace('post_', ''); 

IDのすべてのこの使用は不要と思われるが。あなたは、単に行うことができます：

コールバック関数で

var new_comments = $(this).closest(".card-block").find(".card-text"); 

、その後：

new_comments.html(resultStr).slideToggle(150)promise().done(function ...);