Laravel Auto Load more results on Page Scroll using jQuery AJAX

Laravel Auto Load more results on Page Scroll using jQuery AJAX

In this Post We Will Explain About is Laravel Auto Load more results on Page Scroll using jQuery AJAX With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Auto Load More Data on Page Scroll in laravel Example

In this post we will show you Best way to implement Laravel Load data while Scrolling Page down with jQuery AJAX, hear for Auto Load More Data on Page Scroll (Ajax, jQuery, Laravel) with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Jquery select2 ajax autocomplete using PHP/MySQLi




Step1: Create Simple Table and Model in Laravel

Fist of all I shall make the first students table and laravel model.app/Student.php

<?php
//include namespace
namespace App;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
	//database field initgrate using model
    public $fillable = ['name','details'];
}

Step2: Add Routes in Laravel

In this second step, I shall add laravel routes to handle file or request.app/Http/routes.php

app/Http/routes.php

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

Step3: Create StudentController in laravel

In this 3rd step to see, I shall make a file laravel controller in following laravel path Like as a app/Http/Controllers.

app/Http/Controllers/StudentController.php

<?php

//include namespace
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Student;
class StudentController extends Controller {
    public function loadMore(Request $request){
        $students=Student::paginate(4);
        $html='';
        foreach ($students as $student) {
            $html.='<li>'.$student->id.' <strong>'.$student->name.'</strong> : '.$student->details.'</li>';
        }
        if ($request->ajax()) {
            return $html;
        }
        return view('files.loadmore',compact('students'));
    }
}

Step4: Create Blade File

In this Last step, I shall make a HTML view file within laravel app files directory therefor first make files directory after that make a loadmore.blade.php within file folders folders Like as a(resources/views/files/loadmore.blade.php)

Also Read :   Angularjs Input Tags List autocomplete textbox - ngTagsInput

resources/views/files/loadmore.blade.php

@extends('layouts.default')
@section('content')
<style>
.wrapper > ul#dataoutput li {
  margin-bottom: 2px;
  background: #3d3d3d;
  padding: 22px;
  list-style: none;
}
.ajax-liveload{
  text-align: center;
}
</style>
<div class="wrapper">
    <ul id="dataoutput"><!-- dataoutput dsipaly here --></ul>
    <div class="ajax-liveload"><img src="{{ asset('images/liveload.gif') }}" /></div>
</div>
<script>
var livepage = 1; //track student scroll as livepage some number, right now livepage number is 1
more_data(livepage); //initial data content load
$(window).scroll(function() { //detect livepage scroll
    if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if student scrolled from top to bottom of the livepage
        livepage++; //livepage number increment
        more_data(livepage); //load content   
    }
});     
function more_data(livepage){
  $.ajax(
        {
            url: '?livepage=' + livepage,
            type: "get",
            datatype: "html",
            beforeSend: function()
            {
                $('.ajax-liveload').show();
            }
        })
        .done(function(data)
        {
            if(data.length == 0){
            console.log(data.length);
               
                //notify student if nothing to load
                $('.ajax-liveload').html("No more records!");
                return;
            }
            $('.ajax-liveload').hide(); //hide liveload animation once data is fetched
            $("#dataoutput").append(data); //append data into #dataoutput element          
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('No response from server');
        });
 }
</script>
@endsection

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   AngularJS ui router nested views - AngularJS nested directive controller example





Example

I hope you have Got What is Laravel Infinite Scroll with jQuery and AJAX And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.