onlinecode

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

onlinecode

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

In this post we will give you information about Auto Load More Data on Page Scroll with jQuery and PHP Laravel. Hear we will give you detail about Auto Load More Data on Page Scroll with jQuery and PHP LaravelAnd how to use it also give you demo for it if it is necessary.

In this tutorial, I will tell you how to auto load more data on page scroll from database using jQuery and PHP Laravel.

You don’t have need to click anywhere to load data because data is loading on page scroll automatically from MySQl database.

There are so many website that use the same logic to load data on page scroll, this is very useful with several cases.

It will check 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.

Here is a simple step to let you know about loading data automatically on page scroll from top to bottom using jQuery and PHP.


Step1: Create Table and Model

In this step, we will create first products table and model.


app/Product.php

  1. <?php
  2. namespace App;
  3. use IlluminateDatabaseEloquentModel;
  4. class Product extends Model
  5. {
  6.     public $fillable=['name','details'];
  7. }
<?php

namespace App;
use IlluminateDatabaseEloquentModel;
class Product extends Model
{
    public $fillable = ['name','details'];
}

See also  Laravel Load More Data on Page Scroll - Laravel 5

I have inserted some dummy records in my products table to see the loader on page scroll.


Step2: Add Routes

In this step, we will add routes to handle request.


app/Http/routes.php

  1. Route::get('jquery-loadmore',['as'=>'jquery-loadmore','uses'=>'FileController@loadMore']);
Route::get('jquery-loadmore',['as'=>'jquery-loadmore','uses'=>'FileController@loadMore']);


Step3: Create FileController

In this step, we will create a file controller in following path app/Http/Controllers.


app/Http/Controllers/FileController.php

  1. <?php
  3. namespace AppHttpControllers;
  5. use IlluminateHttpRequest;
  6. use AppHttpControllersController;
  7. use AppProduct;
  8. class FileController extends Controller {
  9.     public functionloadMore(Request $request){
  11. $products=Product::paginate(4);
  12. $html='';
  13. foreach($productsas$product){
  14. $html.='<li>'.$product->id.' <strong>'.$product->name.'</strong> : '.$product->details.'</li>';
  15. }
  17. if($request->ajax()){
  18. return$html;
  19. }
  20. returnview('files.loadmore',compact('products'));
  21. }
  22. }
<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpControllersController;
use AppProduct;
class FileController extends Controller {
    public function loadMore(Request $request){

        $products=Product::paginate(4);
        $html='';
        foreach ($products as $product) {
            $html.='<li>'.$product->id.' <strong>'.$product->name.'</strong> : '.$product->details.'</li>';
        }

        if ($request->ajax()) {
            return $html;
        }
        return view('files.loadmore',compact('products'));
    }
}


Step4: Create Blade File

In this step, we will create a view file within files directory so first create files directory and then create loadmore.blade.php within file directory directory (resources/views/files/loadmore.blade.php)


resources/views/files/loadmore.blade.php

  1. @extends('layouts.default')
  2. @section('content')
  3. <style>
  4. .wrapper > ul#results li {
  5.   margin-bottom: 1px;
  6.   background: #f9f9f9;
  7.   padding: 20px;
  8.   list-style: none;
  9. }
  10. .ajax-loading{
  11.   text-align: center;
  12. }
  13. </style>
  14. <div class="wrapper">
  15. <ul id="results"><!-- results appear here --></ul>
  16. <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}"/></div>
  17. </div>
  18. <script>
  19. var page =1;//track user scroll as page number, right now page number is 1
  20. load_more(page);//initial content load
  21. $(window).scroll(function(){//detect page scroll
  22. if($(window).scrollTop()+ $(window).height()>= $(document).height()){//if user scrolled from top to bottom of the page
  23.         page++;//page number increment
  24. load_more(page);//load content   
  25. }
  26. });
  27. functionload_more(page){
  28.   $.ajax(
  29. {
  30.             url:'?page='+ page,
  31.             type:"get",
  32.             datatype:"html",
  33.             beforeSend:function()
  34. {
  35.                 $('.ajax-loading').show();
  36. }
  37. })
  38. .done(function(data)
  39. {
  40. if(data.length==){
  41.             console.log(data.length);
  43. //notify user if nothing to load
  44.                 $('.ajax-loading').html("No more records!");
  45. return;
  46. }
  47.             $('.ajax-loading').hide();//hide loading animation once data is received
  48.             $("#results").append(data);//append data into #results element          
  49. })
  50. .fail(function(jqXHR, ajaxOptions, thrownError)
  51. {
  52. alert('No response from server');
  53. });
  54. }
  55. </script>
  56. @endsection
@extends('layouts.default')
@section('content')
<style>
.wrapper > ul#results li {
  margin-bottom: 1px;
  background: #f9f9f9;
  padding: 20px;
  list-style: none;
}
.ajax-loading{
  text-align: center;
}
</style>
<div >
    <ul id="results"><!-- results appear here --></ul>
    <div ><img src="{{ asset('images/loading.gif') }}" /></div>
</div>
<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          
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('No response from server');
        });
 }
</script>
@endsection

Click here to see demo..

Show Demo

Label :

PHP

MySQL

Laravel PHP Framework

jQuery

How To

MVC

JavaScript

Database

Hope this code and post will helped you for implement Auto Load More Data on Page Scroll with jQuery and PHP Laravel. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version