laravel - I make Comment by Ajax but its not working

Question

I make Comment by Ajax but its not working. It can insert and I already recived the data form controller. I check alert is display but html not display. Here is my Route: Route::post('/addComment', 'LessonController@addComment'); Here is my controller

public function addComment(Request $request)
{
  $lesson_id = $request->lesson_id;
  $name = $request->name;
  $body= $request->body;

  $comment = new Comment();
  $comment->name = $name ;
  $comment->body = $body;
  $comment->lesson_id = $lesson_id;
  $comment->save(); 
 return response()->json($comment);

}

Here is view comment create

<div class="leave_review">
                <h3 class="blog_heading_border"> Leave a Comment </h3>
                {!! Form::open(['action' => 'LessonController@addComment', 'method' => 'POST', 'id' => 'comment' ]) !!}

                  <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                  <input type="hidden" id="lesson_id" name="lesson_id" value="{{$lesson->id}}" /> 

                </div>
                <div class="row">
                  <div class="col-sm-6">
                    {{Form::label('name','Name')}}
                    {{Form::text('name', '', ['class' => 'form-group', 'id'=>'name'])  }}
                  </div>
                <div class="col-sm-12">
                  {{Form::label('body','Message')}}
                  {{Form::textarea('body', '', ['class' => 'form-group', 'id'=>'body'])  }}
                    </div>
                    </div>
                    <div class="row">
                    <div class="col-md-12">
                    </div>
                </div>
                {{Form::submit('Submit', ['name'=>'submit', 'class' => 'mt_btn_yellow pull-right'])}}
                {!! Form::close() !!}
                <br>

Here is comment display view blade

 <div id="commen_show">
                  @foreach ($comment as $item) 
                      <ol class="review-lists">
                      <li class="comment">
                      <div class="activity_rounded">
                      <img src="/storage/Iconimage/about.png" alt="image"> </div>
                      <div class="comment-body">
                      <h4 class="text-left">{{$item->name}} &nbsp;&nbsp;
                          <small class="date-posted pull-right">{{$item->created_at}}</small>
                      </h4>
                      <p>{{$item->body}}</p>               
                      <a href="#" class="pull-left">Reply</a>
                      <div class="clearfix"></div>
                      </div>
                      </li>
                      </ol>
                  @endforeach
                </div>
                  </div>  

Here is my javascript, I think something wrong with append

<script>
      $(document).ready(function($){
        $('#comment').on('submit', function(){
          var lesson_id  = $('#lesson_id').val();
          var name       = $('#name').val();
          var body       = $('#body').val();
          var _token     = $('input[name="_token"]').val();

          $.ajax({
                          type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
                          url         : "{{url('/addComment')}}",  // the url where we want to POST
                          data: {_token:_token, lesson_id:lesson_id, body:body, name:name},
                          success: function(response) {    
                            if(response){

                     $('#commnet_show').prepend(
                                `  <ol class="review-lists">
                    <li class="comment">
                    <div class="activity_rounded">
                    <img src="/storage/Iconimage/about.png" alt="image"> </div>
                    <div class="comment-body">
                    <h4 class="text-left">${response.name} &nbsp;&nbsp;
                        <small class="date-posted pull-right">${response.created_at}</small>
                    </h4>
                    <p>${response.body}</p>               
                    <a href="#" class="pull-left">Reply</a>
                    <div class="clearfix"></div>
                    </div>
                    </li>
                    </ol>  `
                              ;);
                              }
                             }                  
                      });
                   });
                });

  </script>  

question from:https://stackoverflow.com/questions/66058795/i-make-comment-by-ajax-but-its-not-working

Answer 1

Waitting for answers