This is my code here
<script>
$(document).ready(function(){
$(window).scroll(fetchPosts);
function fetchPosts(){
var page = $('.endless-pagination').data('next-page');
if(page !== null){
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function(){
var scroll_position_for_post_load = $(window).height() + $(window).scrollTop + 100;
if(scroll_position_for_post_load >= $(document).height(){
$.get(page, function(data){
$('.posts').append(data.posts);
$('.endless-pagination').data('next-page', data.next_page);
});
}
}, 350))
}
}
});
</script>
I replaced the IF condition
scroll_position_for_post_load >= $(document)height()
with
1 == 1
This worked, but the page loads continuously without the user scrolling.
This is the code in my PagesController Variable page was declared at the top
public function index(Request $request){
$posts = Post::orderBy('created_at', 'desc')->paginate($this->paginate_posts);
if ($request->ajax()) {
return [
'posts' => view('pages.ajax.index')->with(compact('posts'))->render(),
'next_page' => $posts->nextPageUrl()
];
}
return view('pages.index')->with(compact('posts'));
}
And on my index.blade.php page i have
@forelse ($posts as $post)
{{-- Post and replies attached --}}
<div class="media stream">
<a href="{{route('profile')}}" class="media-avatar medium pull-left">
<img src="{{asset('images/user.png')}}">
</a>
<div class="media-body">
<div class="stream-headline">
<h5 class="stream-author">
<a href="http://localhost/blog/public/question/{{$post->slug}}" class="center">{{ $post->title }}</a>
</h5>
<h5 class="stream-author">
<a href="{{route('profile')}}" style="text-decoration:none;color:initial">{{ $post->user->name }}</a>
<small> {{ date('F d, Y', strtotime($post->created_at)) }} at {{ date('h:i A', strtotime($post->created_at)) }} </small>
</h5>
<div class="stream-text">
{{ $post->body }}
</div>
</div><!--/.stream-headline-->
<div class="stream-options">
<a href="#" class="btn btn-small">
<i class="icon-thumbs-up shaded"></i>
Like
</a>
<a href="http://localhost/blog/public/question/{{$post->slug}}" class="btn btn-small">
<i class="icon-reply shaded"></i>
Reply
</a>
<a href="#" class="btn btn-small">
<i class="icon-retweet shaded"></i>
Repost
</a>
<span class="stream"> {{$post->replies->count()}} comment (s) </span>
</div>
</div>{{-- media body --}}
</div><!--/.media .stream-->
@empty
<div class="media stream">
<div class="media-body">
<div class="stream-headline">
<div class="stream-text">
All clean. No posts found!!
</div>
</div><!--/.stream-headline-->
</div>
</div><!--/.media .stream-->
@endforelse
On pages.ajax.index i have
@forelse ($posts as $post)
{{-- Post and replies attached --}}
<div class="media stream">
<a href="{{route('profile')}}" class="media-avatar medium pull-left">
<img src="{{asset('images/user.png')}}">
</a>
<div class="media-body">
<div class="stream-headline">
<h5 class="stream-author">
<a href="http://localhost/blog/public/question/{{$post->slug}}" class="center">{{ $post->title }}</a>
</h5>
<h5 class="stream-author">
<a href="{{route('profile')}}" style="text-decoration:none;color:initial">{{ $post->user->name }}</a>
<small> {{ date('F d, Y', strtotime($post->created_at)) }} at {{ date('h:i A', strtotime($post->created_at)) }} </small>
</h5>
<div class="stream-text">
{{ $post->body }}
</div>
</div><!--/.stream-headline-->
<div class="stream-options">
<a href="#" class="btn btn-small">
<i class="icon-thumbs-up shaded"></i>
Like
</a>
<a href="http://localhost/blog/public/question/{{$post->slug}}" class="btn btn-small">
<i class="icon-reply shaded"></i>
Reply
</a>
<a href="#" class="btn btn-small">
<i class="icon-retweet shaded"></i>
Repost
</a>
<span class="stream"> {{$post->replies->count()}} comment (s) </span>
</div>
</div>{{-- media body --}}
</div><!--/.media .stream-->
@empty
<div class="media stream">
<div class="media-body">
<div class="stream-headline">
<div class="stream-text">
All clean. No posts found!!
</div>
</div><!--/.stream-headline-->
</div>
</div><!--/.media .stream-->
@endforelse
Is there any error in the code i can't see?
Found the bug in the code, though I had to use JavaScript's alert method to print the value of $(window).height(), $(document).height() and $(window).scrollTop().
That was when I discovered that I missed the parentheses after $(window).scrollTop.
The corrected code is->
var scroll_position_for_post_load = $(window).height() + $(window).scrollTop() + 100;
if(scroll_position_for_post_load >= $(document).height(){
// rest of code goes here
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.