Load More Data on Page Scroll in Laravel 5.8, Load More Data on Page Scroll in Laravel 5.7, Infinite Page Scroll Pagination Using Jquery in Laravel 5.6, Load More Data on Page Scroll in Laravel 5.5, Load More Data on Page Scroll in Laravel 5.4, Infinite Page Scroll Pagination Using Jquery in Laravel, Auto Load Content on page scroll with JQuery and AJAX in Laravel, Laravel Auto Load More Data from Database using jQuery Ajax
Hello Friends Today, through this Tutorial, you will be told how the data is Loaded on the same page by the laraval through the Jquery and Scrolling the page.
Friends, How easy it is when we are using Facebook. And we keep scrolling the page and the data is Auto Loaded. This is what we call the page Auto Loaded data.
So Today, How we load the data after the page auto load by the laravel framework. This method is also called infinit auto load.
First of all you will be told overview that what you will do by step by step.
- install laravel framework.
- Create Table.
- Create Model.
- Add your Route file.
- Create Controller.
- Create Bload file.
Step 1:-install laravel framework
In the first step, first install the laravel application.
command for installation.
composer create-project --prefer-dist laravel/laravel blog
Step 2:-Create Table.
In this step, you create a database name accordingly. And go into the env file and make it a connection. After creating the database, now you have to create a table. To create a table in laravel, you can create by using the following command. You can create this command by running it in your cmd.
php artisan make:migration create_post_table
After running this command, you will now find a blog table named file in this file(database/migrations).
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateBlogTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('blogs', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop("blogs");
}
}
Ok, now we have to run migration using laravel artisan command:
php artisan migrate
Step 3: -Create Model.
After that you have to create a blog name model.
php artisan make:model Blog
After running this command, you will be created in the app/Blog.php name file inside your app name folder.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
public $fillable = ['title','description'];
}
Step 4: – Add Route
Now add the code below to your Route file.
Routes/web.php
Route::get('/', 'LoadController@myPost');
Step 5:- Create Controller
app/Http/Controllers/LoadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Blog;
class LoadController extends Controller
{
public function myPost(Request $request)
{
$show = Blog::paginate(5);
if ($request->ajax()) {
$view = view('data',compact('show'))->render();
return response()->json(['html'=>$view]);
}
return view('load-data',compact('show'));
}
}
Step 6:- Create Bload File.
resources/views/load-data.blade.php
load-data.blade.php
<!DOCTYPE html>
<html lang=en>
<head>
<title></title>
<script src="http://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">
</head>
<link rel="shortcut icon" href="{{url('img/favicon.png')}}">
<body>
<div class="col-md-7 col-sm-8 col-xs-12 fix-mr-lf3">
<div class="row">
<div id="post-data">
<?php
foreach ($show as $shows) {
$id=$shows->id;
$title=$shows->title;
$description=$shows->description;
?>
<div class="block">
<div class="row">
<div class="col-md-12">
<div class="border2">
<div class="media-right no-pad-left">
<h2><?php echo $title; ?></h2>
<p><?php echo substr($description, 0, 145); ?></p>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="ajax-load text-center" style="display:none">
<p>Loading...</p>
</div>
</div>
</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>