Laravel 5.8: автоматическое обновление div становится грязным и медленным при использовании ajax

Question

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

До того, как я реализовал код: https://imgur.com/a/9unsq2c После: https://imgur.com/a/glBEiEU

shownews.blade.php

Comments area

     <h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
                    {{$news->comments()->count()}}
                    Comments</h4>
                  <div class="row" >
                      <div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
                      width: 400px; " id="commentarea" >

                          @foreach($news->comments as $comment)
                            <div class="comment" style="background-color: #f6efef;" >
                          <div class="author-info">
                              <img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">

                              <div class="author-name">
                                   <h4>{{$comment->name}} </h4>
                                   <p class="author-time"> {{  date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
                              </div>
                          </div>
                            <div class="comment-content">
                                    {{$comment->comment}}
                            </div>
                            </div>
                          @endforeach
                      </div>
                  </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script>
            $(document).ready(function() {
             setInterval(function() {
                $('#commentarea').load('{{ action('NewsController@showNews', ['news' => $news->id]) }}');
             }, 5000);
            });
           </script>

NewsController.php

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\News;
use Validator;
use Image;
use View;
use Storage;
use Illuminate\Support\Facades\Input;
// use App\Http\Controllers\Controller;

class NewsController extends Controller
{

//Shownews method. This is where the individual news is shown with its comments.

    public function showNews($id)
    {

        $all = DB::table('news')->get();
        $news = News::find($id);
        return View::make('coin.shownews', compact('news','all'));
    }
}

CommentsController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Comment;
use App\News;
use App\Graph;
use Validator;
use Session;


class CommentsController extends Controller
{
    public function store(Request $request, $news_id)
    {
        //
        $this->validate($request, array(
            'name'=> 'required | max:255',
            'email'=> 'required| email | max:255',
            'comment'=> 'required | min:5'
        ));

        $news = News::find($news_id);

        $comment = new Comment();

        $comment->name = $request->name;
        $comment->email = $request->email;
        $comment->comment = $request->comment;
        $comment->approved = true;
        $comment->news()->associate($news);

        $comment->save();


        // return $comment->toJson();

        return redirect()->route('article', [$news->id]);
}

Answer 1

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

Comments area

 <h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
                {{$news->comments()->count()}}
                Comments</h4>
              <div class="row" >
                  <div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
                  width: 400px; " id="commentarea" >
                  @include('table_data')
                  </div>
              </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
        $(document).ready(function() {
         setInterval(function() {
           var page = window.location.href;
           $.ajax({
           url: page+'/table,
           success:function(data)
           {
            $('#commentarea').html(data);
           }
           });
         }, 5000);
       });
           </script>

Создайте включающий клинок, затем поместите необходимый элемент коммента table_data.blade.php

                      @foreach($news->comments as $comment)
                        <div class="comment" style="background-color: #f6efef;" >
                         <div class="author-info">
                          <img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">

                          <div class="author-name">
                               <h4>{{$comment->name}} </h4>
                        <p class="author-time"> {{  date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
                         </div>
                        </div>
                        <div class="comment-content">
                                {{$comment->comment}}
                        </div>
                        </div>
                      @endforeach

Конечно, вам нужен другой маршрут для него и другая функция в контроллере

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\News;
use Validator;
use Image;
use View;
use Storage;
use Illuminate\Support\Facades\Input;
// use App\Http\Controllers\Controller;

class NewsController extends Controller
{

//Shownews method. This is where the individual news is shown with its comments.



 public function showNews($id)
    {
        $new = News::find($id);
        return view('coin.shownews')->with('new', $new);
    }
 public function commentData($id);
    {
        $all = DB::table('news')->get();
        $news = News::find($id);
        return view('table_data', compact('news', 'all'))->render();
    }
}

затем добавьте маршрут на web.php

`Route::get('article/{id}/commentData', 'NewsController@commentData')`;
//you must change the name of the route base on your url just add the /table. Route can't be the same so you need to add that

Надеюсь, это поможет!