Inicio AJAX Cargar contenido gradualmente con jQuery (tipo twitter ó Facebook)

Cargar contenido gradualmente con jQuery (tipo twitter ó Facebook)

5 7700

Este tutorial nos explica como imitar la funcionalidad de twitter y Facebook para cargar contenido gradualmente (en ingles load content like Facebook & twitter). El ejemplo es sencillo nada muy elaborado, pues el objetivo es tener una idea del proceso de detrás  del diseño. Vamos a trabajar con MySQL, PHP, jQuery y CSS. Lo que se quiere lograr es mostrar 10 comentarios y un enlace para cargar los siguientes 10 y así en adelante. Como se aprecia en la imagen.

comments ajax load

Para nuestro ejemplo vamos a usar una tabla llamada comentarios que contiene la siguiente estructura (el script se encuentra dentro de zip que proporcionamos).

tabla comentarios

CREATE TABLE IF NOT EXISTS `comentarios` (
`id` int(7) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL DEFAULT '',
`fecha` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`contenido` text NOT NULL,
KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1

conexion.php

Este archivo se encarga de la conexión con la base de datos, cambiamos los valores de la variables de acuerdo a nuestro server de prueba.

<?php class Conector{ var $conect; var $BaseDatos; var $Servidor; var $Usuario; var $Clave; function Conector(){ $this->BaseDatos = "test"; $this->Servidor = "localhost"; $this->Usuario = "root"; $this->Clave = ""; } function conectar() { if(!($con=mysql_connect($this->Servidor,$this->Usuario,$this->Clave))){ die("Error al conectar a la base de datos"); } if (!mysql_select_db($this->BaseDatos,$con)){ die("Error al seleccionar la base de datos"); } $this->conect=$con; return true; } } ?>

basedatos.php

Contiene la clase BaseDatos y un método para realizar las consultas necesarias.

<?php include_once("conexion.php"); class BaseDatos{ //constructor var $con; function BaseDatos(){ $this->con=new Conector; } function Consultar($q){ if($this->con->conectar()){ return mysql_query($q); } } } $bd = new BaseDatos; ?> 

index.php

En la cabecera HTML incluimos una llamada a jQuery y también a una archivo JavaScript llamada custom.js el cual explicamos mas adelante.

En la parte de PHP incluimos el archivo basedatos.php que contiene nuestra clase que se conecta con la base de datos.

El código PHP consulta por el total de items en la tabla comentarios, y luego hace una consulta de los 10 primeros registros de la tabla.

Iniciamos un contador $i para llevar un conteo de los comentarios a mostrar, veremos la importancia de esta variable más adelante.

En HTML creamos una estructura de lista con el atributo identificador list-items, y mediante un bucle en PHP el cual se pasea por los registros de la consulta, los muestra como elemento HTML <li> que tiene como identificador item-(contador $i). Dentro de cada elemento <li> irá el nombre de autor del comentario y su comentario en sí. Fuera del bucle hay otro elemento <li> con identificador more-items con un vinculo ó enlace cuya evento onclick llama a la funcion loadcontent.

La función loadcontent, acepta como parámetros el número de página siguiente a mostrar y el total de elementos que tiene la tabla comentarios.

¿Cómplicado? No verdad =)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Carga de contenido gradualmente</title>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="application/javascript" src="custom.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <?php require_once('basedatos.php'); $qr = $bd->Consultar("select * from comentarios"); $total_items = mysql_num_rows($qr); $q = $bd->Consultar("select * from comentarios order by fecha desc limit 0, 10"); $i = 1; ?> <ul id="list-items"> <?php while( $ComentarioItem = mysql_fetch_array($q) ){?> <li id="item-<?php echo $i ?>"> <h2><?php echo $i ?></h2> <span class="autor"><?php echo $ComentarioItem['nombre'] ?></span> <span class="contenido"><?php echo $ComentarioItem['contenido'] ?></span> </li> <?php $i++; } ?> <li id="more-items"> <a href="#" onclick="loadcontent(2,<?php echo $total_items ?>)" >Cargar mas ...</a> </li> </ul> </body> </html>

custom.js

Este archivo JavaScript, contiene dos funciones

1) goToByScroll que genera una efecto animado de desplazamiento al hacia el identificador del elemento HTML que especifiquemos, y

2) loadcontent -que mencionamos arriba- es el corazón de todo este ejemplo, vamos a explicar las principales líneas.

function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } var loadcontent = function(p, num_total){ $("#more-items").remove(); num = ((p - 1) * 10) + 1; pag = p + 1; num_ini = num; $.ajax({ type: "POST", url : 'ajax_content.php?p='+p, async: true, success : function (datos){ var dataJson = eval(datos); for(var i in dataJson){ $("#list-items").append('<li id="item-' + num +'"><h2>' + num + '</h2>' + '<span class="autor">' + dataJson[i].comentario_nombre +'</span>' + '<span class="contenido">' + dataJson[i].comentario_content +'</span></li>'); num++; } if(num<num_total){ $("#list-items").append('<li id="more-items">' + '<a href="#" onclick="loadcontent('+ pag +','+ num_total +')">Cargar mas ...</a>' + '</li>'); } goToByScroll("item-"+num_ini); } }); return false; };

ajax_content.php

Captura el número de página según la variable p, y calculamos en base a ello el número de registro de donde empezará a mostrar los datos la consulta SQL.

Mediante un bucle llenamos los datos de la consulta en un array y luego lo codificamos en formato Json con la función json_encode y eso retornamos a la función loadcontent en JavaScript.

<?php $page = $_GET['p']; $start = ($page-1)*10; require_once('basedatos.php'); $q = $bd->Consultar("select * from comentarios order by fecha desc limit $start, 10"); $num_rows = mysql_num_rows($q); $arr = array(); if($num_rows > 0){ while($ComentarioItem = mysql_fetch_assoc($q)){ $arr[] = array( "comentario_nombre" => $ComentarioItem['nombre'], "comentario_content" => $ComentarioItem['contenido'] ); } echo ''. json_encode($arr) .''; } ?>

En resumen la funciona loadcontent en JavaScript carga los datos generados por el archivo ajax_content.php según el número de página en la variable p, y este archivo PHP genera los datos en formato Json, los cuales son leídos por la función loadcontent en JavaScript y en base a ello se genera una nueva estructura DOM con los elementos <li>.

Ver el ejemplo en acción

Descargar tutorial

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....