Load More Data on Page Scroll using Ajax Jquery Laravel 6

Today, We want to share with you Load More Data on Page Scroll using Ajax Jquery Laravel 6.In this post we will show you wordpress plugin require another plugin, hear for jquery ajax call on scroll down using Laravel 6 we will give you demo and example for implement.In this post, we will learn about how to use load more in laravel with an example.

Load More Data on Page Scroll using Ajax Jquery Laravel 6

There are the Following The simple About auto load more data on page scroll with jquery & php Full Information With Example and source code.

As I will cover this Post with live Working example to develop Auto Load More Data on Page Scroll with jQuery and PHP Laravel 6, so the load data from server while scrolling using jquery ajax is used for this example is following below.

Step 1 : Create Table and Model

app/Product.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
public $table = "products";

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

Step 2: Add Routes

app/Http/routes.php

 Route::get('display-moreproducts',['as'=>'display.moreproducts','uses'=>'[email protected]']);

Step 3: Create FileController

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\HomeController;
use App\Product;

class ProductController extends HomeController
{
    public function DisplayMoreProducts(Request $request)
    {
    	$products = Product::paginate(8);

        $html='';

        foreach ($products as $product) {
            $html.='<li>'.$product->id.' <strong>'.$product->title.'</strong> : '.$product->description.'</li>';
        }

        if ($request->ajax()) {
            return $html;
        }

    	return view('displaymoreproducts');
    }
}

Step 4: Create a Laravel 6 Blade File

resources/views/displaymoreproducts.blade.php

@extends('layouts.app')
@section('content')
<style>
   .wrapper > ul#results li {
     margin-bottom: 2px;
     background: #e2e2e2;
     padding: 20px;
     width: 97%;
     list-style: none;
   }
   .full-page-loading{
     text-align: center;
   }
</style>
<div class="wrapper">
   <ul id="results"><!-- Products all appear here part of the ul li --></ul>
   <div class="full-page-loading"><img src="{{ asset('images/full-page-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 live_page = 1; 
   scoll_more_load_products(live_page);
   $(window).scroll(function() { 
      if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if clients scrolled from top to bottom of the live_page
      live_page++; 
      scoll_more_load_products(live_page);  
      }
    });     
    function scoll_more_load_products(live_page){
        $.ajax({
           url: '?live_page=' + live_page,
           type: "get",
           datatype: "html",
           beforeSend: function()
           {
              $('.full-page-loading').show();
            }
        })
        .done(function(results)
        {
            if(results.length == 0){
            console.log(results.length);
            $('.full-page-loading').html("Sorry No more products!");
            return;
          }
          $('.full-page-loading').hide();
          $("#results").append(results);         
           console.log('results.length');
       })
       .fail(function(jqXHR, ajaxOptions, thrownError)
       {
          alert('sorry, here No response from PHP Laravel server');
       });
    }
</script>

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about auto load more data on page scroll laravel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.