Skip to content

Instantly share code, notes, and snippets.

@JCarlosR
Last active May 12, 2019 01:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save JCarlosR/e38638319cc76a71d92df9c4460a0f20 to your computer and use it in GitHub Desktop.
Save JCarlosR/e38638319cc76a71d92df9c4460a0f20 to your computer and use it in GitHub Desktop.
Cargar contenido de forma dinámica al hacer Scroll (JS y Laravel)
<?php
namespace App\Http\Controllers;
use App\Kine;
use Illuminate\Http\Request;
class KineController extends Controller
{
public function index()
{
$kines = Kine::paginate(12);
return view('welcome', compact('kines'));
}
public function pagination()
{ // page=2
$kines = Kine::paginate(12);
return view('kines.pagination', compact('kines'));
}
}
@foreach ($kines as $kine)
<div class="card">
<img class="card-img-top" src="https://placeimg.com/240/300/miss?{{ $kine->id }}"
alt="{{ $kine->title }}" title="{{ $kine->id }}">
<div class="card-body">
<h5 class="card-title">{{ $kine->alias }}</h5>
<p class="card-text">{{ $kine->title }}</p>
{{ $kine->age }}
<span class="badge badge-pill badge-primary text-uppercase">Primary</span>
<span class="badge badge-pill badge-danger text-uppercase">Danger</span>
<span class="badge badge-pill badge-warning text-uppercase">Warning</span>
</div>
</div>
@endforeach
@extends('layouts.app')
@section('content')
<main>
<section>
<div class="px-3 px-lg-4 px-xl-5 pt-3">
<div class="card-columns" id="anuncios">
@include('kines.pagination')
</div>
</div>
</section>
</main>
@endsection
@section('scripts')
<script>
let page = 2;
window.onscroll = () => {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
const section = document.getElementById('anuncios');
// Pedir al servidor
fetch(`/kines/pagination?page=${page}`, {
method: 'get'
})
.then(response => response.text())
.then(htmlContent => {
// Respuesta en HTML
section.innerHTML += htmlContent;
page += 1;
})
.catch(err => console.log(err));
}
};
</script>
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment