найти дочерний элемент div с jquery и обновить html

Question

У меня возникли проблемы с обновлением сообщения в блоге с новыми комментариями на лету, используя jquery. мой HTML установлен как:

<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:

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(); 
     }); 
    }); 
}); 

Последний должен вставить resultStr в <p> элемента на странице с class="card-text new_comment_{{$i->id}}", но ничего не происходит, когда я нажимаю отправить на новую должность , a console.log(data); показывает, что сообщение передается, поэтому это не проблема контроллера, а код jquery.

Answer 1

Вам не хватает . в начале new_comment_id, чтобы он соответствовал классу (и не было бы яснее назвать это new_comment_class?).

var new_comment_id = '.new_comment_' + id; 

Другая проблема заключается в том, что идентификатор формы является post_##, поэтому вы устанавливаете comment_id и new_comment_id к #comments_post_## и .new_comment_post_## соответственно. Вы должны удалить префикс post_ при установке id:

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 ...);