Cargar HTML externo con jQuery

Por: ryuz

13 de Julio del 2007

290 de clabLevel
Otros artículos de ryuz

39,616 visitas

javascript jquery

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>

Código :

<div id="show"></div>

Código :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

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>

Artículos Relacionados

• Expandir y contraer Flash con Jquery
• Mejora la accesibilidad de elementos ocultos con Jquery/CSS
• Anular ENTER en formularios con JQuery

javascript jquery

$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).click(function(){         
         $("#show").hide().load(href).fadeIn("slow"); //Le damos efecto
         $(this).attr({ href: "#"});
      });
   });
});

Esta es la manera "fácil". La llamada por medio de $.ajax, permite muchas opciones, como llamado de errores, metodos, etc.

Buen tip
Por: Lunatic Lycanthrop

Buen Tip, me gusto excepto por un detalle: ¿Como linkeas el js directamente a la web de jquery? ... sería mejor bajar el .js y ponerlo en un server propio... por el bien de la web de jquery y la tuya.
Por lo demás, muy buen tip para partir en lo "oculto" de jQuery.
Por: RattaMono

pero funciona colocando el link de la web de jquery?..creo q voa probar xP yo tb pensé lo mismo que RattaMono..

Buen Tip!..gracias
Por: jst!_blog

wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita?
Por: J0h

J0h :

wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita?

Simplemente coloca la dirección de tu php en el link:

Código :

<a href="mipagina.php">PHP</a>

Por: The Fricky!

Hola todos, este es un truco muy util, pero como se puede hacer si creamos los botones en un flash????


Muchas gracias
Por: mixtacho

primero que todo, muchas gracias por este mini tuto
lo otro
no me funciona..
Por: gonzalo_blog

$("#nav a").each(function(){
    var href = $(this).attr("href");
    $(this).attr({ href: "#"});
    $(this).click(function(){
        $("#show").load(href);
    });
});

$("#nav a").each(function(){
    var link = $(this);
    var href = link.attr("href");
    link.click(function(){
        $("#show").load(href);
        return false;
    });
});

La verdad haces más sencilla la vida con estos tips .

Tengo una duda, y si quisiera que solo carge una web sin dar click a algún boton, como cambiaría la función??
Por: BlackMage

ps utilice tu ejemplo y me resulto excelente pero ahora quiero que los links que me aparecen en el div de contenido no me aparescan en una ventana nueva si no en el mismo div.

eso se puede con ese mismo script?
Por: covra-blog