jQuery – Cargando HTML externo

Posted on Actualizado enn


Hoy vamos a ver como utilizando AJAX podemos cargar HTML remoto en determinad página, de esta forma evitamos tener en nuestra página una gran cantidad de código HTML que hará mas pesada la misma.

Para cargar el HTML remoto vamos a utilizar como siempre jQuery y en este caso la función load, la sintaxis general es:

   1:  $("elemento").load('pagina.html');

Como se puede apreciar solo necesitamos un contenedor que generalmente será un div y la página que se quiere cargar.

Ahora vamos a ver que características tiene este evento load:

  • Carga todo el contenido comprendido dentro de la etiqueta body.
  • La página que se quiere cargar debe estar en el mismo dominio que la página desde la cual se hace el llamado.
  • Es posible especificar un elemento particular de la página a cargar, por ejemplo de la página about.html solo cargar el div con id igual a divInfo, la sintaxis seria:
   1:  $("elemento").load('about.html #divInfo');
  • Cuando se carga la página, solo se carga el HTML, por lo tanto si se tiene código JavaScript este no estará disponible, para solucionar este caso en la página  que realiza el llamado se debe definir el código necesario, para este caso no es posible hacerlo de la manera tradicional como se atacha un manejador de evento a un elemento, se debe hacer uso de la función live que permite asignar manejadores de eventos a elementos que se crean luego de la carga del DOM, les dejó un link donde hablé del tema: jQuery live.

Ahora vamos a implementar toda esa carreta con un ejemplo de verdad:

1. Tenemos una página aspx desde la cual vamos a realizar los llamados a las páginas externas, en definitiva nuestra página tenemos:

   1:  <div id="divAbout"></div>
   2:      <fieldset>
   3:          <legend>Cargar página completa</legend>
   4:          <ol id="olCompleta">
   5:              <li><a href="jQuery.htm">jQuery</a></li>
   6:              <li><a href="aspnet.htm">ASP.NET</a></li>
   7:          </ol>
   8:          <div id="divInfo"></div>
   9:      </fieldset>
  10:      <fieldset>
  11:          <legend>Cargar solo descripción</legend>
  12:          <ol id="olDescripcion">
  13:              <li><a href="jQuery.htm">jQuery</a></li>
  14:              <li><a href="aspnet.htm">ASP.NET</a></li>
  15:          </ol>
  16:          <div id="divOnlyDes"></div>
  17:      </fieldset>

y el código jQuery:

   1:   $(function () {
   2:              $("#divAbout").load('about.htm');
   3:              $("#olCompleta a").click(function (e) {
   4:                  var dirUrl = $(this).attr('href');
   5:                  $("#divInfo").load(dirUrl);
   6:                  e.preventDefault();
   7:              })
   8:              $("#olDescripcion a").click(function (e) {
   9:                  var dirUrl = $(this).attr('href') + ' #divDescripcion';
  10:                  $("#divOnlyDes").load(dirUrl);
  11:                  e.preventDefault();
  12:              })
  13:          })

Entonces la idea es:

  • En el div con id igual a divAbout se va cargar la página about.htm, la cual tiene la información de contacto.
  • En la primera lista olCompleta como su nombre lo indica se va a cargar la página objetivo de manera total cada vez que se de click en una de las opciones, en la variable dirUrl traemos la dirección de la página capturando el valor del atributo href, luego se realiza el cargue el el divInfo y finalmente con la línea e.preventDefault() lo que se hace es prevenir/cancelar el comportamiento normal del objeto, el cual sería enviarnos a una determinada página.
  • Casi igual que el punto anterior, la diferencia es que se especifica en la línea 9 que de la página a cargar solo queremos el elemento con id igual a divDescripcion.

2. En la estructura de nuestro sitio tenemos las páginas HTML que vamos a cargar, como se menciono anteriormente debes estar en el mismo dominio que la página que realiza el llamado, en la imagen se visualiza dicha estructura:

Imagen1

3. Finalmente la aplicación se verá así:

Imagen2

Como se observa en la imagen, se esta implementando un llamado a páginas html y el contenido se muestra en una sola página.

Bueno como pueden ver es bastante fácil cargar HTML remoto utilizando AJAX.

Les dejo EL ejemplo que implementa dicha funcionalidad:

Descarga del ejemplo !

About these ads

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s