How to JQuery Load More Data on Scroll in Laravel 11?

22-May-2024

.

Admin

How to JQuery Load More Data on Scroll in Laravel 11?

Hi, Dev

In this guide, I'll walk you through the process of implementing AJAX pagination on scroll in a Laravel 11 application.

In this example, we'll start by creating a posts table using a migration. Next, we'll set up a data model for the posts and a factory class to generate dummy post data. Finally, we'll create a route to load posts and implement code to automatically load more data on a button click event using jQuery AJAX. Let's dive into the step-by-step process.

Step for Laravel 11 Load More Data on Scroll Event Example


Step 1: Install Laravel 11

Step 2: MySQL Database Configuration

Step 3: Create Migration

Step 4: Create Model

Step 5: Create Factory Class

Step 6: Create Route

Step 7: Create Controller

Step 8: Create View Files

Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: MySQL Database Configuration

In Laravel 11, there is a default database connection using SQLite, but if we want to use MySQL instead, we need to add a MySQL connection with the database name, username, and password to the `.env` file.

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3: Create Migration

Here, we will create a new migration for adding a new table posts in the users table. So let's run the following command:

php artisan make:migration create_posts_table

After this command, you will find one file in the following path "database/migrations," and you have to put the below code in your migration file to create the posts table.

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

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

$table->id();

$table->string('title');

$table->string('slug');

$table->text('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('posts');

}

};

Now you have to run this migration with the following command:

php artisan migrate

Step 4: Create Model

After creating the "posts" table, you should create the Post model for posts. First, create a file in this path app/Models/Post.php and put the following content in the Post.php file:

app/Models/Post.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

/**

* Write code on Method

*

* @return response()

*/

protected $fillable = [

'title', 'body', 'slug'

];

}

Step 5: Create Factory Class

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

php artisan make:factory PostFactory --model=Post

Further, put the below code in database\factories\PostFactory.php:

database\factories\PostFactory.php

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

use App\Models\Post;

use Illuminate\Support\Str;

/**

* @extends \Illuminate\Database\Eloquent\Factories\Factory

*/

class PostFactory extends Factory

{

/**

* The name of the factory's corresponding model.

*

* @var string

*/

protected $model = Post::class;

/**

* Define the model's default state.

*

* @return array

*/

public function definition(): array

{

return [

'title' => $this->faker->text(),

'slug' => Str::slug($this->faker->text()),

'body' => $this->faker->paragraph()

];

}

}

Open the terminal and execute the commands below to generate the test data:

php artisan tinker

Post::factory()->count(20)->create()

Step 6: Create Route

In this step, we need to create routes for displaying posts and getting posts. So, open your "routes/web.php" file and add the following route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

Route::get('posts',[PostController::class,'index'])->name('posts.index');

Step 7: Create Controller

Here, we need to create a new controller, PostController, with an index method to display the posts view and return data. So let's put the code below.

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Post;

class PostController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function index(Request $request)

{

$posts = Post::paginate(10);

if ($request->ajax()) {

$view = view('data', compact('posts'))->render();

return response()->json(['html' => $view]);

}

return view('posts', compact('posts'));

}

}

Step 8: Create View Files

In the last step, let's create `posts.blade.php` and `data.blade.php` for displaying the posts list and put the following code:

resources/views/posts.blade.php

<!DOCTYPE html>

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

<head>

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

<title>How to JQuery Load More Data on Scroll in Laravel 11? - NiceSnippets.com</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

</head>

<body>

<div class="container mt-5" style="max-width: 750px">

<h1>How to JQuery Load More Data on Scroll in Laravel 11? - NiceSnippets.com</h1>

<div id="data-wrapper">

@include('data')

</div>

<div class="text-center">

<button class="btn btn-success load-more-data"><i class="fa fa-refresh"></i> Load More Data...</button>

</div>

<!-- Data Loader -->

<div class="auto-load text-center" style="display: none;">

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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" />

</path>

</svg>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

var ENDPOINT = "{{ route('posts.index') }}";

var page = 1;

$(".load-more-data").click(function(){

page++;

infinteLoadMore(page);

});

/*------------------------------------------

--------------------------------------------

call infinteLoadMore()

--------------------------------------------

--------------------------------------------*/

function infinteLoadMore(page) {

$.ajax({

url: ENDPOINT + "?page=" + page,

datatype: "html",

type: "get",

beforeSend: function () {

$('.auto-load').show();

}

})

.done(function (response) {

if (response.html == '') {

$('.auto-load').html("We don't have more data to display :(");

return;

}

$('.auto-load').hide();

$("#data-wrapper").append(response.html);

})

.fail(function (jqXHR, ajaxOptions, thrownError) {

console.log('Server error occured');

});

}

</script>

</body>

</html>

resources/views/data.blade.php

@foreach ($posts as $post)

<div class="card mb-2">

<div class="card-body">{{ $post->id }}

<h5 class="card-title">{{ $post->title }}</h5>

{!! $post->body !!}

</div>

</div>

@endforeach

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/posts

Output:

jQuery-load-more-laravel-11

I hope it can help you...

#Laravel 11