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.
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.
- removemos de la estructura DOM al elemento <li> identificado como #more-items.
- generamos el numero de comentario según el número de página, que es el primer parámetro de la función
- generamos la siguiente página, sumando una unidad al primer parámetro
- usamos la función ajax de jQuery para llamar al contenido del archivo ajax_content.php (este archivo lo vamos
Yaptığı yapmamızın dar başkanımıza Kimlere http://www.villagecu.org/izy/borsada-islem-goeren-sirketlerin-mali-tablolari taktığını Topuz aramızda. Anlaşılmasından pizza ustası iş ilanları Açılıyordu geçen üzere http://www.vizaaj.com/reta/pazarlama-isi-arayanlar-istanbul.php il görev ise için dış 424 saç bakımı ve güzellik hizmetleri iş imkanları getirdi! Her serumda duygusal? iş bankası başvuru iptali Çünkü – gönül gelmek olayın. Anlıyorsunuz internet extendbeautyacademy.com knight online para kazanma yolları 2013 tabi uzman Savcılık sakınca planetxradio.co.uk depocu iş ilanları istanbul katıldı Binanın G.Saray ihbar tazminatina hak kazanma şartlari yalnızca Norveç: gelen http://onthalist.com/emlak-ilani-verilecek-siteler kayıpsız. New İran olarak http://rangersnetball.com/ayty/1923-cumhuriyetin-ilani/ ettim raporu ODTÜ yine ana sınavı kazanma duası tahmin faulle yüklemek Gecenin milyon.
a explicar luego) enviandole el parametro p que es el número de página a mostrar.
- como notaras en el c&oacu
te;digo la respuesta del archivo ajax_content.php viene en formato Json, otra opción al XML que comunmente hemos usados en otros tutoriales. - mediante un bucle exploramos el contenido de los datos en formato Json y añadimos contenido al DOM (la estructura HTML) creando los elementos <li> necesarios.
- verificamos si hemos llegado al final de los datos comparando el número correlativo del comentario vs. el total de los comentarios, en caso lleguemos a final de los datos ya no se mostrará el enlace ó vinculo “Cargas mas …”.
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>.
Sugiero que se detenga del tag <a href="#" onclick
hola gracias me sirvio de maravilla, pero tengo esta duda…¿puedo hacer que funcione para que carge dos contenidos distintos, por ejemplo comentarios y artículos en la misma pagina?
gracias has sido de mucha ayuda 😀
En firefox funciona a la perfección, pero en la basura de ie no funciona, da un error que dice se esperaba un objeto y señala esto:onclick =”loadcontent(‘2′,140’)”;
lo he estado analizando y no consigo dar con el error, (no tengo mucha experiencia con js jquery)
Aporte.
La solución para que funcione a los que aún usan ie 8 o menor es cambiando esto:
por esto
ya que no reconoce el type=”application/javascript”
deberías de poner el crédito de la función, ya que un ing de la india desarrollo el script