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.

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). — Tim, Oct 19 '15 at 18:58
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? — senty, Oct 19 '15 at 19:01
See my infinit scroll plug in for L5 pagination here http://stackoverflow.com/questions/31853472/laravel-infinite-scroll-for-pagination-output — Per Sonberg, Mar 02 '16 at 10:02

score 6 · Accepted Answer · edited May 23 '17 at 12:23

6

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.

edited May 23 '17 at 12:23

Community

1
1

answered Oct 19 '15 at 19:09

Tim

5,893
3
35
64

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`? – senty Oct 19 '15 at 19:13
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. – Tim Oct 19 '15 at 19:18
I got very confused. I understand that I will only put `{!! $posts->render() !!}` to output `
`
– senty Oct 19 '15 at 19:46
Sorry for being confusing. Don't put it inside your foreach loop but outside (also see my edited answer). – Tim Oct 19 '15 at 19:48
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 – senty Oct 19 '15 at 20:24
Not really, I added the js code in the question, but it doesnt work :/ – senty Oct 20 '15 at 08:53
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. – Tim Oct 20 '15 at 09:37
+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. – Tenaciousd93 Nov 17 '15 at 11:26

Infinite Scroll jQuery & Laravel 5 Paginate

1 Answers1

Linked