En uno de mis primeros post explicaba lo sencillo que es, a través de jQuery, recargar un DIV contenedor sin necesidad de recargar toda la página. Durante este tiempo he visto que pueden surgir un par de problemas dependiendo del contenido de dicho DIV. Si el contenido que queremos recargar es para mostrar la información que tenemos en un menú principal... bueno me explico mejor con la imagen de la derecha. Como podéis ver esta sería una página principal sencilla que consta de una cabecera, con el menú principal arriba que sería siempre fija. Una zona de enlaces a la derecha, también fija y un pié de página también fijo. El único DIV que se recargaría sería el contenedor del medio el cual mostraría la información que queramos ver, al pinchar en los enlaces del menú principal. Espero haberme explicado bien. Bueno, uno de los problemas que nos podemos encontrar es el siguiente: lo normal sería que en el menú tuviesemos un enlace que nos vuelva a llevar a la página principal (un botón llamado INICIO). Si mantenemos el código de recarga tal cual, nos recargaría TODA la página dentro del contenedor y eso no lo queremos. La solución es sencilla con un simple "if".if (href!="index.html"){} /* Lo cual significa: si el valor de href es distinto de index.html entonces ejecutar el código que hay entre{}
El otro problema sería más peculiar: si en el contenido (aparte de en el menú), tenemos enlaces que se comportan de la misma manera (recargando sólo el div contenedor), y en la información recargada tenemos otros enlaces que hacen lo mismo, es decir, si incluimos enlaces a contenido que queremos se recargue en ese mismo div contenedor, entonces el código no funcionará. ¿Porqué?, pues porque el código sólo hace referencia a las etiquetas que se encuentran en la página donde ejecutamos el código y no a las que están por venir, aunque tengan una clase o un id con el mismo nombre. ¿Solución? la hay y sencilla (necesario tener actualizado jQuery en la última versión mejor). La mejor solución sería usar la función ".on()" la cual extiende el evento realizado a las etiquetas que se vayan a cargar. La sintaxis sería así:
$("#content").on('click','.read_r a', function() {}
Y su significado sería: "busco dentro del id "#content" todos los "a" que tengan la clase ".read_r" y cuando se haga click en uno de ellos ejecutamos la función. Según dicen es mucho mejor que usar .delegate o .live.
El código completo nos quedaría así:
<script type="text/javascript">
$(document).ready(function(){
$("#content").on('click','.read_r a', function() {
var href = $(this).attr("href");
if (href!="index.html") {
$(this).attr({ href: "#"});
$("#content").css("display","none");
$("#cargando").css("display", "inline");
$("#content").load(href).fadeIn(700);
$("#cargando").css("display", "none");
}
})
})
</script>
El siguiente problema que surge, en un tipo de página como la que estoy describiendo, es que si el buscador nos muestra los enlaces que recargamos dentro del div contenedor entonces, al pinchar sobre ellos, veremos una página sin formato, porque, como ya dije en el post actualizar div contenedor, el código que recargamos no tiene las etiquetas <html>, <head>,<body>. La solución en código para redirigir a otra página.
Otros problemas que pueden surgir serían de visualización dependiendo del navegador usado.
Yo he tenido el siguiente problema con el chrome: no se cargaba el contenido al pinchar los enlaces. Pero esto no ocurre cuando subes la página al servidor.
Otro problema lo podéis tener con el IE en versiones iguales o inferiores a la 8. Si el contenido a recargar es código HTML, como es este caso, hay que tener cuidado con las etiquetas. Si tenemos alguna mal cerrada no se cargará el contenido.
Comentarios
Publicar un comentario