Laravel使用Jquery和AJAX在滾動中加載更多數據

Question

這是我的代碼在這里

<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>

我替換了IF條件

scroll_position_for_post_load >= $(document)height()

與

1 == 1

這可行，但是頁面不斷加載而無需用戶滾動。

這是我的PagesController Variable頁面中的代碼在頂部聲明

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'));

}

在我的index.blade.php頁面上

    @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

在pages.ajax.index我有

    @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

我看不到的代碼有錯誤嗎？

Answer 1

雖然我必須使用JavaScript的alert方法來打印$（window）.height（），$（document）.height（）和$（window）.scrollTop（）的值，但在代碼中找到了該錯誤。

那是當我發現我錯過了$（window）.scrollTop之后的括號。

正確的代碼是->

var scroll_position_for_post_load = $(window).height() + $(window).scrollTop() + 100;

if(scroll_position_for_post_load >= $(document).height(){
    // rest of code goes here
}