Cargar HTML externo con jQuery
Original de Cristalab
Todos/as hemos leído el Tutorial de AJAX. Siempre tuve ganas de poder usar el ejemplo en un proyecto, pero nunca lo he intentado usar por ser intrusivo. Pero el otro día leyendo la documentación de jQuery me encontré con una cosa.
En este tip os voy a mostrar qué fácil es cargar documentos externos HTML con jQuery de forma no intrusiva.
Empezaremos creando una página HTML con un menú de navegación. Una lista normal a la que pondremos como identificador: “nav”
Código :
<ul id="nav"> <li><a href="uno.htm">Enlace Uno</a></li> <li><a href="dos.htm">Enlace Dos</a></li> <li><a href="link.htm">Otro link</a></li> <li><a href="1337.htm">1337</a></li> <li><a href="creacionismo.htm">iDIotas</a></li> </ul>
Y un contenedor donde cargaremos el HTML externo en este caso un div con id show:
Código :
<div id="show"></div>
Pero este código HTML es suficiente para que funcione, hace falta jQuery. Lo primero que hacemos es bajarnos la última versión de aquí (comprimido) y lo colocamos en nuestra página entre las etiquetas head así:
Código :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
Falta colocar el script que hará funcione, entre etiquetas <script> que es este:
Código :
<script type="text/javascript">
$(document).ready(function(){
$("#nav a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
$("#show").load(href);
});
});
});
</script>
La “magia” del código está en $(“#show”).load(href);. Funciona parecido al include() de PHP. Primero seleccionamos el lugar donde se cargará el contenido y luego el contenido a cargar. (Aquí la documentación de jQuery). En nuestro caso, al hacer click en los elementos a que estén incluidos en #nav, #show se cargará las páginas a las que enlazan éstas.
@Juan este ejemplo y lo que estas contando en el post no es correcto o no has explicado bien que es lo que hace, ya que según el código que has puesto lo primero que entiendo que todo el contenido se carga en la misma pagina y no cargas ningun html externo ademas no se hace refencia de ello en ningun sitio del ejemplo, este código lo que hace es modificar el atributo “href” de la lista, ademas lo que le estas pasando al load el “href” es el “link” de la pagina que hay en un momento inicial, estaria bien hacer una rectificacion del mismo. saludos!!
Excelente ejemplo lo aplique y funciono perfecto… ahora buscare como darle estilo al menu…
Me has salvado la vida, estaba buscando justamenet esto.
Funciona perfectamente en en todos los naveagdores, mil gracias!!!
El ejemplo está caido
Podrias subir el ejemplo nuevamente?
Gracias