Laravel 5 Paginate + Infinite Scroll jQuery

Question

I am trying to use paginate()to achieve infinite scroll. I think the easiest way is to use the "endless scroll" to achieve this. If you have any other suggestion on how to do this without an infinite scroll library, just using jQuery, I would be happy to know.

I return the variable to view as follows:

public function index()
 {
    $posts = Post::with('status' == 'verified')
                      ->paginate(30);

    return view ('show')->with(compact('posts'));
 }

My view:

<div id="content" class="col-md-10">
    @foreach (array_chunk($posts->all(), 3) as $row)
        <div class="post row">
            @foreach($row as $post)
                <div class="item col-md-4">
                    <!-- SHOW POST -->
                </div>
            @endforeach
        </div>
    @endforeach
    {!! $posts->render() !!}
 </div>

Javascript part:

$(document).ready(function() {
  (function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>End of content!</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
     };

     $('#content').infinitescroll({
         loading: loading_options,
         navSelector: "ul.pagination",
         nextSelector: "ul.pagination  li:last a",   // is this where it failing?
         itemSelector: "#content div.item"
     });
   });
}); 

However, this does not work. The part → render () works because I get the [<[1] 2] 3]>] part. However, the endless scroll does not work. I also do not get any errors in the console.

[<[1] 2] 3]>] is as follows: source:

<ul class="pagination">
       <li class="disabled"><span>«</span> </li>                    //   «
       <li class="active"><span>1</span></li>                       //   1
       <li><a href="http://test.dev/?page=2">2</a></li>             //   2
       <li><a href="http://test.dev/?page=3">3</a></li>             //   3
       <li><a href="http://test.dev/?page=2" rel="next">»</a></li>  //   »
</ul>

Answer 1

Pagination , . , Laravel:

1.) ( jQuery, CSS count max_page - HTML) 2.) AJAX , .

...

HTML:

<!-- Your code hasn't changed-->
<div id="content" class="col-md-10">
  @foreach (array_chunk($posts->all(), 3) as $row)
    <div class="post row">
        @foreach($row as $post)
            <div class="item col-md-4">
                <!-- SHOW POST -->
            </div>
        @endforeach
    </div>
  @endforeach
  {!! $posts->render() !!}
</div>

<!-- Holds your page information!! -->
<input type="hidden" id="page" value="1" />
<input type="hidden" id="max_page" value="<?php echo $max_page ?>" />

<!-- Your End of page message. Hidden by default -->
<div id="end_of_page" class="center">
    <hr/>
    <span>You've reached the end of the feed.</span>
</div>

max_page ( : ceil(Post::with('status' == 'verified')->count() / 30);.

, jQuery:

var outerPane = $('#content'),
didScroll = false;

$(window).scroll(function() { //watches scroll of the window
    didScroll = true;
});

//Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)
setInterval(function() {
    if (didScroll){
       didScroll = false;
       if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){
        pageCountUpdate(); 
    }
   }
}, 250);

//This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message
function pageCountUpdate(){
    var page = parseInt($('#page').val());
    var max_page = parseInt($('#max_page').val());

    if(page < max_page){
       $('#page').val(page+1);
       getPosts();
       $('#end_of_page').hide();
    } else {
      $('#end_of_page').fadeIn();
    }
}


//Ajax call to get your new posts
function getPosts(){
    $.ajax({
        type: "POST",
        url: "/load", // whatever your URL is
        data: { page: page },
        beforeSend: function(){ //This is your loading message ADD AN ID
            $('#content').append("<div id='loading' class='center'>Loading news items...</div>");
        },
        complete: function(){ //remove the loading message
          $('#loading').remove
        },
        success: function(html) { // success! YAY!! Add HTML to content container
            $('#content').append(html);
        }
     });

} //end of getPosts function

! . Masonry , .

Answer 2

- http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

script :

{!! HTML::script('assets/js/jscroll.js') !!}
<script>
    $('.link-pagination').hide();
    $(function () {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('.link-pagination').remove();
            }
        });
    });
</script>

larvel pagination

{!! $restaurants->links() !!}