Laravel and Infinite Scroll

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

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 !

Answer 3

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.