load more in laravel
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel dynamic auto load more page scroll examle</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5" style="max-width: 550px"> <div id="data-wrapper"> <!-- Results --> </div> <!-- Data Loader --> <div class="auto-load text-center"> <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve"> <path fill="#000" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path> </svg> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var ENDPOINT = "{{ url('/') }}"; var page = 1; infinteLoadMore(page); $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() >= $(document).height()) { page++; infinteLoadMore(page); } }); function infinteLoadMore(page) { $.ajax({ url: ENDPOINT + "/blogs?page=" + page, datatype: "html", type: "get", beforeSend: function () { $('.auto-load').show(); } }) .done(function (response) { if (response.length == 0) { $('.auto-load').html("We don't have more data to display :("); return; } $('.auto-load').hide(); $("#data-wrapper").append(response); }) .fail(function (jqXHR, ajaxOptions, thrownError) { console.log('Server error occured'); }); } </script> </body> </html>
