senty senty - 4 months ago 79
Javascript Question

Infinite Scroll jQuery & Laravel 5 Paginate

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.

Tim Tim
Answer

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.

Comments