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?
May 22, 2017
2
Level 1
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.
Level 1
Update: My bad. I had the pagination outside the container of the infinite scroll.
Please or to participate in this conversation.