Laravel使用Jquery和AJAX在滚动中加载更多数据

Question

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?

Answer 1

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
}