Site Admin
Site Admin Founder of MeaningArticles

Laravel 8 Auto Load More Data on Page Scroll with AJAX

Hello Dev.

This detailed article, will provide the quickest and easiest way to learn about how to dynamically autoload the data on infinite page scroll in laravel application with the help of jQuery AJAX.

The topmost programs use the infinite web page scroll technique to load more records. for example, fb, Twitter, Tumblr, Instagram, and plenty of greater profound apps use this auto load extra information on limitless page scroll to make the interaction greater interactive and user-friendly. while you reach their feed phase, you scroll to countless, and the data gats loaded routinely.

So, on this laravel infinite scroll academic, we are going to replace the laravel pagination sample with load more data on page scroll in laravel the usage of jQuery AJAX.

Step 1: Create Laravel Project

first of all we want to get clean and new Laravel eight version application the use of bellow command, now open your terminal OR command prompt and then fire bellow command and run it

composer create-project laravel/laravel laravel-auto-load-more --prefer-dist

Step 2: Configuration of Database

Secondly, insert the database name, username and password in .env file


Step 3: Set Up Migration and Model

Subsequently, you have to create a Model, plus it will help manifest the table into the database.

Ergo, invoke the command to generate the Blog model

php artisan make:model Blog -m

Next, update the below code in database/migrations/create_blogs_table.php


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('blogs', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

Add following code in app/Models/Blog.php file


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
    use HasFactory;
    protected $fillable = [

After that, open a terminal window and execute the artisan migration command

php artisan migrate

Step 4: Generate Dummy Data Using Tinker

This step explains how to generate dummy data using factory; this data loads dynamically on page scroll

php artisan make:factory BlogFactory --model=Blog

Next, put the below code in database\factories\BlogFactory.php



namespace Database\Factories;

use App\Models\Blog;
use Illuminate\Database\Eloquent\Factories\Factory;

class BlogFactory extends Factory
     * The name of the factory's corresponding model.
     * @var string
    protected $model = Blog::class;

     * Define the model's default state.
     * @return array
    public function definition()
        return [
            'post_name' => $this->faker->name,
            'post_description' => $this->faker->text

Open terminal, execute the below commands to generate the test data

php artisan tinker

Step 5: Generate and Configure Controller

Now, you need a controller in which we will add the functions to invoke blade view and fetch blog data from the database. Thus, run command to generate a blog controller file

php artisan make:controller BlogController

Next, add the following code in the app/Http/Controllers/BlogController.php file



namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Blog; 
use Validator;
use Redirect;
use Response;

class BlogController extends Controller
    public function getArticles(Request $request)
        $results = Blog::orderBy('id')->paginate(10);
        $artilces = '';
        if ($request->ajax()) {
            foreach ($results as $result) {
                $artilces.='<div class="card mb-2"> <div class="card-body">'.$result->id.' <h5 class="card-title">'.$result->post_name.'</h5> '.$result->post_description.'</div></div>';
            return $artilces;
        return view('welcome');

Step 6: Create and Add Routes

In the subsequent step, create route with the to make the GET request to fetch the data for adding into infinite scroll component. Thus, add the below code in the routes/web.php file



use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BlogController;

Route::get('/blogs', [BlogController::class, 'getArticles']);

Step 7: Create Blade View

Right here, to invoke the view, you need to create a blade view file. Notwithstanding, we are using the existing welcome blade view template.

Next, insert the following code in the resources/views/welcome.blade.php file

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel dynamic auto load more page scroll example -</title>

    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">

    <div class="container mt-5" style="max-width: 550px">
        <div id="data-wrapper">
            <!-- Results -->

        <!-- Data Loader -->
        <div class="auto-load text-center">
            <svg version="1.1" id="L9" xmlns="" xmlns:xlink=""
                x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                <path fill="#000"
                    d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                        from="0 50 50" to="360 50 50" repeatCount="indefinite" />

    <script src=""></script>
        var ENDPOINT = "{{ url('/') }}";
        var page = 1;

        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

        function infinteLoadMore(page) {
                    url: ENDPOINT + "/blogs?page=" + page,
                    datatype: "html",
                    type: "get",
                    beforeSend: function () {
                .done(function (response) {
                    if (response.length == 0) {
                        $('.auto-load').html("We don't have more data to display :(");
                .fail(function (jqXHR, ajaxOptions, thrownError) {
                    console.log('Server error occured');



Step 8: Run Development Server

Now that everything has been done, wherefore start the laravel application with the following command

php artisan serve

Open the browser plus add the following url on the address bar to test the project

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.