CODEWITHSUNDEEP
phpajaxlaraveljquery-paginationlaravel-pagination
Shadman Rahman
Shadman Rahman

Reputation: 11

Why is my Ajax request failing for infinity scroll pagination in laravel?

I am trying to perform an infinity scroll pagination using window.scroll() method on laravel. Whenever I reach bottom of the page-

  1. loadMoreData(page) is called.
  2. beforeSend:function() successfully executes.
  3. .fail() calls from $.ajax() and alerts "server not responding".

Here are my laravel and ajax codes below from 3 different files - index.blade, data.blade(Views/data), PostController.php

INDEX.BLADE

@extends('layouts.app')
@section('content')

`<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">`

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"integrity="sha2569/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>

<div class="container">



<div class="col-md-12" id="post-data">
    @include('data')
  </div>

  <div class="ajax-load text-center" style ="display:none">
    <p><img src="/storage/Rand_Img/insta-dataloader.gif">Loading More Post... </p>
  </div>

</div>

<script>

$(document).ready(function(){


  function loadMoreData(page){
     $.ajax({
       url:'?page='+ page,
       type:'get',
       beforeSend:function(){
         $(".ajax-load").show();
       }
     }).done(function(data){
       if(data.html == " "){
         $('.ajax-load').html("No more data");
       }
       $('.ajax-load').hide();
       $("#post-data").append(data.html);
     }).fail(function(jqXHR, ajaxOptions, thrownError){
       alert('Server not responding!');
console.log("textStatus: "+textStatus+"\n ajaxOPtions: "+ajaxOptions+"\n jqXHR: "+jqXHR);
     });
   }


$(window).scroll(function(){
  var page = 1;
if($(window).scrollTop() + $(window).height() >= $(document).height() ){
 page++;
 loadMoreData(page);
}
  });


});

</script>

@endsection

Data.BLADE

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>


 @foreach ($post as $show)

  <div class="row">

     <div class="col-6 offset-1">
        <div class="">
          <div class="d-flex align-items-center">
            <div class="pr-4">
              <img src="{{$show->user->Profile->profileImage() }}"
               alt="{{$show->image}}" style="width:70px;" class="rounded-circle">
            </div>
           <a href="/profile/{{$show->user->id}}/index" style=" font-size:20px;">
             {{$show->user->username}}</a>
             <a href="#" style=" font-size:20px;" class="pl-4">Follow</a>
          </div>

          <div class="">
          <p style="font-size:20px;" class="p-4">{{$show->caption}}</p>
          </div>
        </div>
     </div>
  </div>
  <div class="row pb-5 ">
    <div class="col-6 offset-3">
    <a href="/profile/{{$show->user->id}}/index">
      <img src="/storage/{{$show->image}}" alt="{{$show->image}}"class="w-100"></a>
    </div>
  </div>

@endforeach

PostController.php

 $user_id = auth()->user()->following()->pluck('profiles.user_id');

 $post = Post::whereIn('user_id', $user_id)->orderBy('created_at','DESC')->Paginate(3);


 if(($request->ajax())){
   $view  = view('data', compact('post'))->render();
   return response()->json(['html'=>$view]);

 }
   return view('Post/index', compact('post'));

This is what I am getting from network tab...

enter image description here

Response:

enter image description here

Upvotes: 1

Views: 608

Answers (1)

Mtxz
Mtxz

Reputation: 3879

Can you try to put the full URL into your ajax call method? I believe that without specifying the full URL like you did url:'?page='+ page, jQuery will use the current browser page URL as base URL. So Something like url:'https://example.com?page='+ page.

EDIT: Your controller seems to return when the request is Ajax response()->json(['html'=>$view]);. What is the $view object, and why returning it? You should only return the $post variable as JSON, and also retrieve the page number from the request URL parameters (hardcoded at 3 in your script).

Upvotes: 0

Related Questions