Curso de Laravel 5
Curso de Laravel 5
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a hacer un sistema de scroll infinito con laravel 4 y jQuery. En nuestro ejemplo tendremos varios posts, y cuando lleguemos al final del scroll, la función encargada de lanzar el evento comprobará si tiene que mostrar más, si es así, mostraremos un preloader y cargaremos más posts, en otro caso, la función mostrará debajo del último post un mensaje conforme no hay más posts que mostrar, las veces siguientes ya no se ejecutará ya que lo habremos controlado correctamente, empecemos.

Aunque el archivo routes.php, la migración y el seeding que utilizamos aquí son exactamente iguales que en el tutorial cargar más datos con ajax y laravel 4, lo repetiremos para no tener que estar cambiando de página.

Sistema de Scroll Infinito con Laravel 4

El que tenga dudas sobre la instalación de laravel 4, que pase por aquí, con esto podemos empezar por crear una base de datos llamada scroll_infinito_laravel4, y procedemos a hacer una migración para una tabla posts y popularla con el uso de seeding que nos ofrece laravel 4.

Con esto abrimos la migración y colocamos el siguiente código para crear la tabla posts.

Ejecutamos la migración.

Ahora procedemos a popular la tabla con el uso de seeding, abrimos el archivo DatabaseSeeder.php y colocamos lo siguiente.

Ahora lo ejecutamos desde la terminal con el siguiente comando, con lo que nuestra tabla posts ya tendrá 11 posts.

Lo primero que debemos hacer es crear nuestra estructura de directorios, dentro de la carpeta public deberemos colocar la siguiente carpeta que contiene los css foundation.

Descargar archivos css

Esta carpeta llamada imgs contiene el preloader y también debe ir dentro de public.

Descargar preloader ajax

Ahora, debemos crear una carpeta llamada js y dentro creamos un nuevo archivo llamado functions.js, de momento lo dejamos así, más tarde volveremos.

Abrimos el archivo routes.php y colocamos el siguiente código, de momento esto nos servirá para poder mostrar los 4 primeros posts, después haremos la ruta que carga más posts, veamos.

Listo, si visitamos la ruta home nos dará error …, simplemente falta la vista. Con esta ruta le decimos que queremos cargar los 4 primeros posts, si tienes dudas con este código pasa por el tutorial fluent query en laravel 4.

Aquí empiezan los cambios, ya que no tendremos un botón para pulsar, sino que trabajaremos con el evento del scroll, así que lo reemplazaremos por un div oculto con el id del último post. Con esto dicho, creamos un archivo llamado home.blade.php dentro de la carpeta views y dentro colocamos el siguiente código.

Como vemos, cargamos todos los archivos css y js en la cabecera de la página y a continuación recorremos el array que contiene los 4 posts que hemos enviado desde la ruta home. A la variable id le asignamos la id del post, de esta forma, al acceder fuera del loop al valor de id, ésta sólo contendrá la id del último post, que es realmente la que necesitamos para poder obtener los siguientes posts y se la asignamos al atributo id del div con class lastId, así de sencillo.

Ahora debemos crear el código jQuery que se encargue de obtener los posts y de mostrarlos de forma correcta a continuación de los que ya hay, así que abrimos el archivo functions.js que habíamos creado y dentro colocamos el siguiente código.

Ahora sólo nos queda crear la ruta more_posts y podremos dar por terminado el tutorial.

Y eso es todo, simplemente decir que take sirve para limitar los resultados, simplemente eso. Espero que te sea de ayuda para ir conociendo un poco más laravel 4 unido a jQuery, que hoy en día es algo necesario, por no decir obligatorio.