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.

Answer 1

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.

Answer 2

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.

Answer 3

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 !