Laravel 9 Load More Data on Page Scroll using Ajax Jquery

May 07, 2022 . Admin

Hi Guys,

In this tutorial,I will learn you how to use load more data on page scroll using ajax jquery in laravel 9.you can easy and simply use load more data on page scroll using ajax jquery in laravel 9.

In this post example, i will write simple jQuery ajax code for load more data on infinity page scroll in laravel 9 using jQuery and ajax app.

You have to just follow bellow few step and you will get infinite scroll in your laravel application. After finish all those step you will be find output as like bellow preview:

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3: Create Table

we require to create new table "posts" that way we will get data from this table, you can use your own table but this is for example. we have to create migration for posts table using Laravel 9 php artisan command, so first fire bellow command:

php artisan make:migration create_post_table

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

<?php

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

class CreatePostTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("posts");
    }
}

Ok, now we have to run migration using laravel artisan command:

php artisan migrate
Step 4: Create Model
php artisan make:model Post
app/Post.php
<?php

namespace App;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    public $fillable = ['title','description'];
}
Step 5: Create Route

In step , open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

app/web.php
<?php

use App\Http\Controllers\PostController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('my-post', [PostController::class, 'myPost']);
Step 6: Create Controller

If you haven't PostController then we should create new controller as PostController in this path app/Http/Controllers/PostController.php. Make sure you should have posts table with some data. this controller will manage data and view file, so put bellow content in controller file:

app/Http/Controllers/PostController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Post;

class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function myPost(Request $request)
    {
        $posts = Post::paginate(5);

        if ($request->ajax()) {
            $view = view('data',compact('posts'))->render();
            return response()->json(['html'=>$view]);
        }

        return view('my-post',compact('posts'));
    }
}
Step 7: Create View Files

In last step, we have to create view two file "my-post.blade.php" for main view and another for data, so first create my-post.blade.php file:

resources/view/my-post.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 infinite scroll pagination</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
        .ajax-load{
            background: #e1e1e1;
            padding: 10px 0px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center">Laravel 9 infinite scroll pagination</h2>
        <br/>
        <div class="col-md-12" id="post-data">
            @include('data')
        </div>
    </div>
    <div class="ajax-load text-center" style="display:none">
        <p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
    </div>
    <script type="text/javascript">
        var page = 1;
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() >= $(document).height()) {
                page++;
                loadMoreData(page);
            }
        });

        function loadMoreData(page){
            $.ajax(
            {
                url: '?page=' + page,
                type: "get",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .done(function(data)
            {
                if(data.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                $('.ajax-load').hide();
                $("#post-data").append(data.html);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('server not responding...');
            });
        }
    </script>
</body>
</html>
resources/view/data.php
@foreach($posts as $post)
<div>
    <h3><a href="">{{ $post->title }}</a></h3>
    <p>{{ str_limit($post->description, 400) }}</p>

    <div class="text-right">
        <button class="btn btn-success">Read More</button>
    </div>

    <hr style="margin-top:5px;">
</div>
@endforeach
Run Laravel App:

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

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/push-notification

It will help you...

#Laravel 9