JorgeAnzola's avatar

Laravel 5.4 + jScroll.js not working

I'm trying to implement an infinite scrolling based on this tutorial.

Couldn't be simpler, right? well... It's not working. This is my code here:

In the route file (I didn't put it in a controller because was a simple test)

Route::get('/', function(){

$articles = \App\Article::paginate(1);

return view('home')->with('articles', $articles);

});

In home.blade.php

<div class="infinite-scroll">
@foreach($articles as $article)
    <article class="post">
        <header>
            <div class="title">
                <h2>{{ $article->title }}</h2>
            </div>
        </header>
    </article>
@endforeach
</div>

{{ $articles->links() }}

At the bottom of that same file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: '.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

There's absolutely nothing in the console. Like nothing is happening.

I'm missing something, but I don't know what. Do you see something wrong? Thanks!

Ps. I also changed contentSelector: '.infinite-scroll' to contentSelector: 'div.infinite-scroll',. But nothing.

0 likes
2 replies
jlrdw's avatar

Are you sure script is loading? When that page loads in browser and you right click and view source, can you see the call to jquery, and if you click it does the code load?

JorgeAnzola's avatar
JorgeAnzola
OP
Best Answer
Level 1

Update: My bad. I had the pagination outside the container of the infinite scroll.

Please or to participate in this conversation.