Load More Data on Page Scroll using Ajax Jquery Laravel 6

Teams applying “Load More Data on Page Scroll using Ajax Jquery Laravel 6” in a production project can use the linked implementation guide to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Sep 25, 2019

In this article, I will show you load more data with scroll using jquery and php Laravel 6. You don't have need to click anywhere to load data because data is loading on page scroll automatically from MySQl database.

It will check if data length is equal to 0 then display message for "No more records!" and if data length is more than 0 then it append html data to list.

Simpe example as bellow.

Step 1 : Create Table and Model

In this step, we will create first post table and model.

app/Post.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
public $table = "post";
protected $fillable = [ 'title','description' ];   
}

I have inserted dummy records in my post table to see the loader on page scroll.

Step 2: Add Routes

In this step, we will add routes to handle request.

app/Http/routes.php

 Route::get('jquery-loadmore',['as'=>'jquery.loadmore','uses'=>'PostController@jqueryLoadMore']);

Step 3: Create FileController

In this step, we will create a file controller in following path app/Http/Controllers.

app/Http/Controllers/PostController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\HomeController;
use App\Post;
class PostController extends HomeController
{
    public function jqueryLoadMore(Request $request)
    {
    	$posts=Post::paginate(8);
        $html='';
        foreach ($posts as $post) {
            $html.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';
        }
        if ($request->ajax()) {
            return $html;
        }
    	return view('jqueryLoadmore');
    }
}

Step 4: Create Blade File

In this step, we will create a view file within files directory so first create files directory and then create jqueryLoadmore.blade.php directory (resources/views/jqueryLoadmore.blade.php)

resources/views/jqueryLoadmore.blade.php

@extends('layouts.app')
@section('content')
<style>
   .wrapper > ul#results li {
     margin-bottom: 2px;
     background: #e2e2e2;
     padding: 20px;
     width: 97%;
     list-style: none;
   }
   .ajax-loading{
     text-align: center;
   }
</style>
<div class="wrapper">
   <ul id="results"><!-- results appear here --></ul>
   <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
   var page = 1; //track user scroll as page number, right now page number is 1
   load_more(page); //initial content load
   $(window).scroll(function() { //detect page scroll
      if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
      page++; //page number increment
      load_more(page); //load content   
      }
    });     
    function load_more(page){
        $.ajax({
           url: '?page=' + page,
           type: "get",
           datatype: "html",
           beforeSend: function()
           {
              $('.ajax-loading').show();
            }
        })
        .done(function(data)
        {
            if(data.length == 0){
            console.log(data.length);
            //notify user if nothing to load
            $('.ajax-loading').html("No more records!");
            return;
          }
          $('.ajax-loading').hide(); //hide loading animation once data is received
          $("#results").append(data); //append data into #results element          
           console.log('data.length');
       })
       .fail(function(jqXHR, ajaxOptions, thrownError)
       {
          alert('No response from server');
       });
    }
</script>
@endsection

It will help you....