finde Kindelement von div mit jquery und aktualisiere das html

Question

Ich habe eine harte Zeit, die versucht, einen Blogbeitrag mit neuen Anmerkungen on the fly unter Verwendung jquery zu aktualisieren. mein html gesetzt als:

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

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

Letztere resultStr im <p> Element auf der Seite mit class="card-text new_comment_{{$i->id}}" aber es passiert nichts, wenn ich für den neuen Beitrag einreichen klicken einfügen sollte . a console.log(data); zeigt den Post, der übergeben wird, also ist es kein Controller-Problem, sondern dieser jquery-Code.

Answer 1

Sie vermissen die . am Anfang von new_comment_id, so dass es die Klasse entspricht (und wäre es nicht klarer, diese new_comment_class zu nennen?).

var new_comment_id = '.new_comment_' + id; 

Ein weiteres Problem ist, dass die ID des Formulars post_## ist, so dass Sie comment_id und new_comment_id-#comments_post_## und .new_comment_post_## eingestellt wird. Sie müssen die post_ Präfix entfernen, wenn id Einstellung:

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

Obwohl alle diese Verwendung der ID unnötig erscheint. Sie könnten einfach tun:

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

und dann in der Callback-Funktion:

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