Laravel and Infinite Scroll

Question

I have a question about laravel pagination and infinite scroll :

First of all, I have this :

<div class="row">   

<div id="boxes">

    @forelse($duels->results as $d)

        <div class="col-span-4 box notizy">

            @include('versus.versus')

        </div>



    @empty



    @endforelse

</div>

<div class="col-span-12">
    <div class="paginate text-center">
        {{$duels->links()}}
    </div>
</div>

As we can see, I have a div #boxes which contain divs .box . The pagination is set by Laravel and looks like this :

<div class="col-span-12">
    <div class="paginate text-center">
        <div class="pagination">
            <ul>
                <li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
                <li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
                <li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
            </ul>
            </div>      
      </div>
</div>

So now, I want to put an infinite scroll instead of a pagination. How should I do using https://github.com/paulirish/infinite-scroll ?

I stay here if you have questions !

PS : I've tried a few things but none worked like :

    $('#boxes').infinitescroll({
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        selector: null,
        speed: 'fast',
        start: undefined
    },
    state: {
        isDuringAjax: false,
        isInvalidPage: false,
        isDestroyed: false,
        isDone: false, // For when it goes all the way through the archive.
        isPaused: false,
        currPage: 1
    },
    debug: false,
    behavior: undefined,
    binder: $(window), // used to cache the selector for the element that will be scrolling
    nextSelector: "div.paginate li.active a",
    navSelector: "div.paginate",
    contentSelector: null, // rename to pageFragment
    extraScrollPx: 0,
    itemSelector: "div.notizy",
    animate: false,
    pathParse: undefined,
    dataType: 'html',
    appendCallback: true,
    bufferPx: 40,
    errorCallback: function () { },
    infid: 0, //Instance ID
    pixelsFromNavToBottom: undefined,
    path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
    prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
    maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

Based on the example of the github page (and replacing what should be replace), but there's absolutely no effect doing so.

there is something useful in the link: wern-ancheta.com/blog/2015/03/01/… — Setmax
– Setmax, Commented Feb 18, 2016 at 14:50

zloynemec · Accepted Answer · 2014-02-26 22:49:48Z

23

There is also a way to implement this with another infinite scroll plugin https://github.com/pklauzinski/jscroll.

Assuming you have a simple Blade view:

<div class="scroll">
<ol>
    @foreach($media as $m)
        <li>{{$m->title}}</li>
    @endforeach
</ol>

{{$media->links()}}
</div>

We can achieve infinite scroll with the following JS-code

<?=HTML::script('<YOUR PATH HERE>jquery.jscroll/jquery.jscroll.min.js');?>
<script type="text/javascript">
$(function() {
    $('.scroll').jscroll({
        autoTrigger: true,
        nextSelector: '.pagination li.active + li a', 
        contentSelector: 'div.scroll',
        callback: function() {
            $('ul.pagination:visible:first').hide();
        }
    });
});
</script>

The nextSelector property will select the next page link in your default Laravel paging, contentSelector selects only required content, and the callback function hides paging content (I had to manually hide it because their attribute pagingSelector seems to be invalid for me). You can find mode details on plugin's home page.

answered Feb 26, 2014 at 22:49

zloynemec

4495 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohamed Kawsara Over a year ago

This is awesome and light one, thanks for sharing, BUT it won't support multiple scrolls in the same page, so for future guys :D be AWARE!

Carlos Alvarez Over a year ago

This should be the accepted answer, it works like a charm!

Marc Bellêtre Over a year ago

This answer is 4 years old and still saved me like hours of work. Thank you so much! Agree with Carlos Alvarez, should be the accepted answer.

Pretty Good Pancake · Accepted Answer · 2013-05-10 20:25:07Z

18

I've found the solution (for you, people of the future) :

$('#boxes').infinitescroll({
    navSelector     : ".paginate",
    nextSelector    : ".paginate a:last",
    itemSelector    : ".box",
    debug           : false,
    dataType        : 'html',
    path: function(index) {
        return "?page=" + index;
    }
}, function(newElements, data, url){

    var $newElems = $( newElements );
    $('#boxes').masonry( 'appended', $newElems, true);

});

This works because :

The pagination given by laravel 4 is like we saw before
The pagination in laravel give an url like ....?page=x

IMPORTANT

The bug you will encounter is :

When you scroll down beyond what should be the last page, you’ll probably find that you keep getting the last page over and and over again, causing genuinely infinite scrolling.

to fix this, go to the paginator.php (in the laravel folder) and change it as follow :

if (is_numeric($page) and $page > $last = ceil($total / $per_page))
    {
        return Response::error('404');
    }

Hope it will help someone someday !

answered May 10, 2013 at 20:25

Pretty Good Pancake

1,5533 gold badges12 silver badges28 bronze badges

1 Comment

Mohamed Kawsara Over a year ago

Thanks a lot for your answer but it didn't work for me this one is did and it's newer for Lara 5 [stackoverflow.com/questions/33221805/…

jct · Accepted Answer · 2013-09-17 10:19:20Z

2

Thanks Pretty Good Pancake for this solution, it works well. However I think in Laravel 4, the Response Facade no longer has an error() method, so something like App::abort('404', '...') or Response::make('...', 404) would work. Just remember to add the use Illuminate\Support\Facades\.. to the file since the file is namespaced.

I think a cleaner way to do this is probably to extend the Paginator class yourself and implement the getCurrentPage function. That way the changes won't get wiped out when you do a php composer.phar update which may overwrite the files in the vendor directory.

answered Sep 17, 2013 at 10:19

jct

1,7532 gold badges12 silver badges9 bronze badges

Collectives™ on Stack Overflow

Laravel and Infinite Scroll

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related