Auto Load More Data on Page Scroll in Laravel 8 with AJAX

In this tutorial you will learn about the Auto Load More Data on Page Scroll in Laravel 8 with AJAX and its application with practical example.

In this Auto Load More Data on Page Scroll in Laravel 8 with AJAX I’ll show you how to implement infinity scroll or dynamix ajax load more pagination on page scroll in laravel using ajax. In this tutorial you will learn to implement dynamic load more pagination in laravel using ajax in laravel. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel.

Table Of Contents−

Auto Load More Data on Page Scroll in Laravel 8 with AJAX

In this step by step tutorial I will demonstrate you with example to create dynamix ajax load more pagination on page scroll in laravel. Please follow the instruction given below:

Step 1 – Install Laravel 8 App
Step 2 – Connecting App to Database

Step 3 – Create One Model and Migration
Step 4 – Add Route
Step 5 – Create Controller by Command

Step 6 – Create Blade View
Step 7 – Run Development Server
Step 8 – Test This App

Step 1 – Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3 – Create Model and Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Now, go to app/database/migrations and open posts migration file and add following fields:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 4 – Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;

Route::get('posts', [PostController::class, 'index']);

use App\Http\Controllers\PostController;

Route::get('posts', [PostController::class, 'index']);

Step 5 – Create Controller by Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Once the above command executed, it will create a controller file PostController.php in app/Http/Controllers/ directory. Open the PostController.php file and put the following code in it.

app/Http/Controllers/PostController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use Validator,Redirect,Response;
 
use App\Models\Post;
 
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::paginate(8);
        $data = '';
        if ($request->ajax()) {
            foreach ($posts as $post) {
                $data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';
            }
            return $data;
        }
        return view('posts');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\Models\Post;

class PostController extends Controller

{

public function index(Request $request)

{

$posts = Post::paginate(8);

$data = '';

if ($request->ajax()) {

foreach ($posts as $post) {

$data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';

}

return $data;

}

return view('posts');

}

Step 6 – Create a blade view

In this step we will create blade view file. Lets create a blade file posts.blade.php. And put the below HTML code into your posts.blade.php file:

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 8 load more page scroll</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
   .wrapper > ul#results li {
     margin-bottom: 2px;
     background: #e2e2e2;
     padding: 20px;
     width: 97%;
     list-style: none;
   }
   .ajax-loading{
     text-align: center;
   }
</style>
</head>
  
<body>
  
  <div class="container">
   <div class="wrapper">
    <ul id="results"><!-- results appear here --></ul>
     <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
   </div>
  </div>
</body>
</html>

<!doctype html>

<head>

<title>Laravel 8 load more page scroll</title>

<style>

.wrapper > ul#results li {

margin-bottom: 2px;

background: #e2e2e2;

padding: 20px;

width: 97%;

list-style: none;

}

.ajax-loading{

text-align: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

The blade view file will list all your blog posts when you scroll the page down. Next, update the following script into your blade view file:

<script>
   var SITEURL = "{{ url('/') }}";
   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: SITEURL + "posts?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>

var SITEURL = "{{ url('/') }}";

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: SITEURL + "posts?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>

Step 7 – Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/posts

1	http://127.0.0.1:8000/posts

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Auto Load More Data on Page Scroll in Laravel 8 with AJAX