Load Data Dynamically on Page Scroll using AJAX and PHP

admin_img Posted By Bajarangi soft , Posted On 07-01-2021

Load more data with scroll using Jquery and php Laravel 6. You don't have need to click anywhere to load data because data is loading on page scroll automatically from MySQL database, if data length is equal to 0 then display message for "No more records!" and if data length is more than 0 then it append html data to list.

data dynamically on page scroll using ajax and php

Step 1 : Create Table and Model
In this step, we will create first post table and model.
app/Post.php

 <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
public $table = "post";

protected $fillable = [ 'title','description' ];

}
?>

I have inserted dummy records in my post table to see the loader on page scroll.
Step 2: Add Routes
In this step, we will add routes to handle request.
app/Http/routes.php

Route::get('jquery-loadmore',['as'=>'jquery.loadmore','uses'=>'PostController@jqueryLoadMore']);

Step 3: Create FileController
In this step, we will create a file controller in following path app/Http/Controllers.
app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\HomeController;

use App\Post;

class PostController extends HomeController

{

public function jqueryLoadMore(Request $request)

{

$posts=Post::paginate(8);

$html='';

foreach ($posts as $post) {

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

}

if ($request->ajax()) {

return $html;

}

return view('jqueryLoadmore');

}

}

Step 4: Create Blade File
In this step, we will create a view file within files directory so first create files directory and then create jqueryLoadmore.blade.php directory (resources/views/jqueryLoadmore.blade.php)
resources/views/jqueryLoadmore.blade.php
@extends('layouts.app')

@section('content')

<style>

.wrapper > ul#results li {

margin-bottom: 2px;

background: #e2e2e2;

padding: 20px;

width: 97%;

list-style: none;

}

.ajax-loading{

text-align: center;

}

</style>

<div class="wrapper">

<ul id="results"><!-- results appear here --></ul>

<div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>

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: '?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>

@endsection

Related Post