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

Laravel 8 Auto Load more data on Infinite page scroll with ajax jQuery. In this tutorial, we will guide you on how to create auto load more data in laravel 8 app on page scroll using ajax jQuery.

If you have seen some social media or e-commerce sites that use the Load More data functionality to view dynamic data. This functionality loads the data from the database without page refresh using AJAX.

Sometime, you need to auto load more data on the infinity page scroll in laravel 8 app. So, this tutorial will help you on how to create infinity page scroll app in laravel 8 app.

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

Use the following steps to create auto load more data on page scroll using ajax jquery in laravel 8 apps; as follows:

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

In this step, Execute the following command on terminal to download or install the laravel 8 app:

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

Step 2 – Connecting App to Database

In this step, Open Laravel 8 app root directory, find .env file and setup database credential as follow:

 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

In this step, Execute the following command on terminal to create one model and migration name Post. Use the following command and create it:

php artisan make:model Post -m

In this command -m is created the migration file

Next, 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');
}
}

After that, run the following command:

php artisan migrate

This command will create tables in your database.

Step 4 – Add Route

In this step, open “web.php” file, which is located inside Routes directory and add the following route into web.php file:

use App\Http\Controllers\PostController;

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

Step 5 – Create Controller by Command

In this step, execute the following command on terminal to create controller name PostController.php file:

php artisan make:controller PostController

Next, go to app/http/controller/PostController and open PostController in any editor. And update the following code into your PostController file:

<?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, Create one blade file name posts.blade.php. And update 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 - Tutsmake.com</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"></ul>
<div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
</div>
</div>
</body>
</html>

Step 7 – Run Development Server

In this step, execute the php artisan serve command on termianl to start development server locally:

php artisan serve

Step 8 – Test This App

Open browser and hit the following url on it:

http://127.0.0.1:8000/posts

Conclusion

Laravel 8 ajax infinity load more on page scroll example tutorial, you have learned how to implement ajax load more data on page scroll in laravel 8 apps.