Laravel 5.8 комментирует запрос ajax без перезагрузки DOM

Question

Я пытаюсь оставлять комментарии в своем приложении без перезагрузки моей страницы.У меня это работает для удаления комментариев, но это не работает для публикации новых.Может кто-нибудь, пожалуйста, помогите ??

Скрипт для запроса ajax

// Add comments AJAX
$(".commentButton").click(function(){
    var id = $(this).data("id");
    var comment = $("input[name=comment]").val();
    var token = $(this).data("token");

    $.ajax({
       url: "/comments/"+id,
       type: 'POST',
       dataType: 'JSON',
       data: {
           "id": id,
           "comment": comment,
           "_method": 'POST',
           "_token": token,
       },

       success: function(){
        $("#comment_"+id).append(comment);
           console.log('it works!');
       } 
    });
    console.log("It failed");
});

CommentController

  public function store(Request $request, $recipe_id)
    {
        $this->validate($request, array(
            'comment' => 'required|min:5|max:2000'
        ));

        $recipe = Recipe::find($recipe_id);

        $comment = new Comment();
        $comment->name = auth()->user()->name;
        $comment->email = auth()->user()->email;
        $comment->comment = $request->comment;
        $comment->recipe()->associate($recipe); //I have relationship between 
        $comment->save();

        return $comment; 

Блейд-вид, где отображаются комментарии

<div class="col-12 currentComments">
                            <hr>
                        @foreach($recipe->comments as $comment)
                            <div id="comment_{{ $comment->id }}">
                                @if($comment->name == Auth()->user()->name)
                                    <p><a href="/user/{{$comment->name}}">{{$comment->name}}</a></p>
                                    <p class="comment">{{$comment->comment}}</p>
                                    <button class="deleteComment" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Comment</button>
                                @else
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

Куда это приведет?Я знаю, что что-то упустил, но не могу понять, что нужно сделать.Довольно новый для этого.Прости мое невежество.

Answer 1

Я думаю, вы должны получить комментарии, используя ajax для просмотра. Вы можете попробовать что-то вроде ниже. Я надеюсь, что это поможет вам перезагрузить комментарии после сохранения нового комментария без обновления страницы. В вашем blade файле -

<div class="col-12 currentComments">
  <hr>
  <div id="allComments" class="allComments">
       <!--here your comments will render via ajax call-->
  </div>
  <input type="hidden" id="authuser" value="{{ Auth()->user()->name }}">      
</div>

В вашем script вы можете попробовать что-то вроде -

<script>
    $(document).ready(function () {
        comment_load();
        function comment_loadad()
        {
          $.ajax({
              url: '/get-comment-list',
              type: 'GET',
              success: function (response) {
                  var authuser = $("#authuser").val();
                  $.each(response, function (i, data) {
                    $('.allComments').append(
                          '<div id="comment_"'+ data.id + '>' +
                           (data.name == authuser ? 
                               '<p><a href="/user/'+data.name+'">' +data.name +'</a></p>' +
                               '<p class="comment">'+data.comment+'</p>' +
                               '<button class="deleteComment" data-id="'+data.id+'">Delete Comment</button>'
                                : '') 
                          +'</div>');
                    });

                },
                error: function (data) {
                    //console.log(data);
                }
            });
        }
    }

И ваш // Add comments AJAX метод успеха, пожалуйста, повторите append -

success: function(data){                        
           var authuser = $("#authuser").val();
           $('.allComments').append(
                 '<div id="comment_"'+ data.id + '>' +
                   (data.name == authuser ? 
                   '<p><a href="/user/'+data.name+'">' +data.name +'</a></p>' +
                   '<p class="comment">'+data.comment+'</p>' +
                   '<button class="deleteComment" data-id="'+data.id+'">Delete Comment</button>'
                                : '') 
                 +'</div>');
           )
          $("input[name=comment]").val("");

 }