How to insert infinite scroll to Laravel Project

Question

Am very new to Jquery and Ajax being used in laravel and been trying to implement infinite scroll to my project and i have no idea where to start

The Controller:

$books= DB::table('books')->where('status', 'post')->orderBy('created_at', 'DESC')->paginate(15);

   if ($books->isEmpty())
   {
     $books= null;

     return view('landingpage')->withBooks($books);
   }
   return view('landingpage')->withBooks($books);

The view

   @if ($books== null)

            <center><p class="paragraph"> Be the first to share your shopping experience <a href="{{ route('testimonials.create') }}" style="color:#9e0101;"> here</a></p></center>

        @else


        <div class="row mt-0"> <div class="infinite-scroll"> @foreach ($books as $item)
            <div class="col-lg-4 mt-3">
                <p class="paragraph"> <sup><i class="fa fa-quote-left" style="font-size:5px" aria-hidden="true"></i></sup>{{$item->title}}<sup><i class="fa fa-quote-right" style="font-size:5px" aria-hidden="true"></i></sup> </p>
                <img src="../images/{{$item->rate}}.png" style="width:50%" alt="Image">
            <h2 style="font-size:18px">{{$item->firstname}} {{$item->lastname}}</h2> </div>@endforeach </div>{{$books->links()}}</div>

                @endif

The JS

<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
    $('.infinite-scroll').jscroll({
        autoTrigger: true,
        loadingHtml: '<img class="center-block" src="images/loading.gif" alt="Loading..." />',
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.infinite-scroll',
        callback: function() {
            $('ul.pagination').remove();
        }
    });
});

Any help will be grately appreciated

Answer 1

I use ajax for infinate scroll this is example :

Method for view :

public function index(){
        return view('index');
    }

Method for get data wia ajax:

public function ajaxData(Request $request)
    {
        $post_query = Trends::query()
            ->where('is_offer', '!=', 1)
            ->where('direct_to', null)
            ->orderBy('id', 'desc')
            ->paginate(12);

        $data['post_list'] = $post_query;


            if ($data['post_list']->count() > 0) {            
                $ajax_data['post'] = true;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
                $ajax_data['next_data'] = $data['post_list'];

            } else {
                $ajax_data['html'] = false;
                $ajax_data['post'] = false;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
            }
            return response()->json($ajax_data);
    }

And this is my script in blade

var loaddataUrl = '{!! route('explore-ajax-data',array_merge(request()->all())) !!}';
        var nextData = true;
        $(document.body).on('touchmove', onExploreScroll); // for mobile
        $(window).on('scroll', onExploreScroll);

        function onExploreScroll() {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
                if (nextData) {
                    nextData = false;
                    loadMoreData();
                }
            }
        }
        function loadMoreData() {
            $.ajax({
                type: 'GET',
                url: loaddataUrl,        

                success: function (data) {                        
                    if (data.next_url) {
                        loaddataUrl = data.next_url;
                        console.log(data.next_data);
                        nextData = true;
                    } else {
                        nextData = false;
                    }
                },
                error: function (data) {
                    nextData = true;
                }
            })
        }

route(explore-ajax-data) map to public function ajaxData(Request $request)

my routes are :

// this will display home page or home view
Route::get('home', 'HomeController@index')->name('home');

// this is for ajax request.
Route::get('ajax/explore-data', 'HomeController@ajaxData')->name('explore-ajax-data');

link of tutorial