Infinite Scroll jQuery & Laravel 5 Paginate

Question

I am successfully returning the data from Controller

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

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

Also, I am successfully showing everything in 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>

Everything is working nicely until now.

However, I didn't get the official documentation at all. What is 'div.navigation' and '#content div.post'? What should they be in my case?

Snippet From Documentation:

$('#content').infinitescroll({

   navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be ?>hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
});

Edit: My Javascript So Far

$(document).ready(function() {
(function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</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.navigation a:first",
         itemSelector: "#content div.item"
     });
 });
}); 

The [<[1]2]3]>] part is created at the bottom of the page but infinite scroll doesn't work. Also, I get no logs or errors in the console.

Ernie

Well, it's described in the comments what those selector are. div.navigation is your navigation (which you don't have, but you could output it like $posts->render()). and itemSelector is the selector for one item (in your case: div.col-md-4. Think about adding another class like post to it). – Intertwine

I edited my question and added classes as you told, however, I still couldn't connect them in my brain. Can you please show me? – Ernie

See my infinit scroll plug in for L5 pagination here #31853972 – Psychopharmacology

Answer 1

First you need to add the pagination itself like this after the closing #content div:

{!! $posts->render() !!}

This will output something like:

<ul class="pagination"><li><a>...</a></li>

To overwrite the pagination presenter have a look at this answer on SO.

Then your configuration looks like this:

$(document).ready(function() {
    var loading_options = {
        finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</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 a:first",
        itemSelector: "#content div.item"
    });
}); 

Basically, the infinite scroller will call the pagination links for you and thus needs to know, where everything is located to put it all together.

Intertwine

Thanks a lot for your answer. I have one last question. Where should I put class="pagination"? Which one should I change? Does it explicitly has to be ul? – Ernie

You put {!! $posts->render() !!} at the end of your #content div. You don't have to put class="pagination" anywhere as this gets output by the Laravel function. And yes, it has to be ul because that is the format used by the render function. – Intertwine

I got very confused. I understand that I will only put {!! $posts->render() !!} to output <ul class="pagination">... bit. So inside class="item", is that right? And then under that, I will add </ul> – Ernie

Sorry for being confusing. Don't put it inside your foreach loop but outside (also see my edited answer). – Intertwine

I followed the guide you showed, but couldn't make it work. I edited the question and added my javascript code. Can you please take a look? Thanks so much in advance – Ernie

Not really, I added the js code in the question, but it doesnt work :/ – Ernie

I tried to expand my answer, please take a look. But without further information (like console logs, how you implemented infinitescroll etc.) it's hard to tell where the problem could be. Also try to move {!! $posts->render() !!} outside of the #content div. Looking at the documentation that could be your problem. – Intertwine

+1 for both and thanks for your help! For me it worked adding {!! $posts->appends($filters)->render()!!} instead of {!! $posts->render() !!} in blade and nextSelector : "ul.pagination li:last-child a", instead of nextSelector: "ul.navigation a:first", in JS infinite scroll options. – Rhadamanthus