Infinite Scroll in Laravel 5

From a begginers point of view how can i implement infinite scroll into a laravel project. The pagination works perfectly but from there i am stuck

The Controller:


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

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

The view


         <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();
        }
    });
});

aurawindsurfing

7 years ago

Level 50

Here is my implementation of the same jscroll:

@if(\Agent::isMobile())
    <div class="infinite-scroll">
        @include('partials.classifieds')
        @include('partials.bottom_banner')
        {{ $classifieds->appends(Request::except('page'))->links() }}
    </div>
@else
    @include('partials.classifieds')
    @include('partials.bottom_banner')
    {{ $classifieds->appends(Request::except('page'))->links() }}
@endif

and then:

@if(\Agent::isMobile())
    <script type="text/javascript">
        $('ul.list-inline').hide();
        $(function() {
            $('.infinite-scroll').jscroll({
                autoTrigger: true,
                loadingHtml: '<img class="center-block" src="/img/loading.gif" height="100" width="100" alt="Loading..." />',
                padding: 0,
                nextSelector: '.list-inline li.current-page + li a',
                contentSelector: 'div.infinite-scroll',
                callback: function() {
                    $('ul.list-inline').remove();
                    createNewBanner({{$classifieds->currentPage()}});
                }
            });
        });
    </script>
@endif

you basically need to figure out exactly what doom element to lock on to, in my case it is

<div class="infinite-scroll">

I actually display new google ads banner with each new scroll ;-)

Hope it helps!

Please or to participate in this conversation.