jQuery: Anular enlace y cargarlo en div

Muchas veces quiero cargar el contenido de un enlace dentro de un div, pero me gusta que los enlaces tengan el atributo href con la dirección real, para que en el caso de que el navegador no tenga javascript activado puedan visitar el enlace igualmente.

Para ello he creado una función ayudándome de la librería jQuery, tened en cuenta que para que os funcione tenéis que tener esta librería enlazada en vuestra web.

La explicación:
Lo que hace la función es seleccionar todos los enlaces que tengan asociada la clase “cargar”. Cuando se hace click sobre uno de éstos se anula el enlace para que no nos lleve directamente a la página y pueda ejecutar la función tranquilamente. Luego, recoge la url a cargar del atributo href y el nombre del div en el que se cargará del atributo name del enlace. Por último, carga la dirección dentro de éste.

Espero que os sirva al menos como base, ya sabéis que podéis / debéis trastearla y adaptarla a vuestro proyecto.

La función:

$("a.cargar").live('click', function(event){
     event.preventDefault();
     var url = $(this).attr("href");
     var div = "#"+$(this).attr("name");
     $(div).load(url);
     return false;
});

El html:

<a href="formulario.php" title="Formulario" class="cargar" name="formulario">Contacto</a>
<div id="formulario"></div>
  • 8 abril 2010
  • Maquetación
  • ,

9 comments on “jQuery: Anular enlace y cargarlo en div”

  1. ¿Podría servir esto para cargar un vídeo de Youtube al pinchar en el enlace? Si me das buenas noticias es posible que lo intente cuando tenga un rato.

    Buen post, Natali.

  2. Lo intenté pero no me ha funcionado. ¿Lo has hecho en alguna página de pruebas para que pueda ver en el código fuente qué es lo que he hecho mal?

    He probado poniendo la llamada a la función antes de terminar head y luego antes de terminar el body. Y JQuery me carga bien, porque tengo otras cositas funcionando con esta librería en el blog, pero no sucede absolutamente nada al pinchar en el enlace.

  3. Hola José!
    No la tengo en ninguna página de pruebas, pero la estoy usando en varios proyectos y no me ha dado problemas.
    Puede ser que intentes cargar una url externa a tu página en un div de ésta? Si es así no te funcionará, ya que sólo carga archivos alojados en tu servidor..
    Ya me cuentas que tal! Saludos!

  4. Pues entonces lo tengo claro. Lo quería utilizar en mi blog de Blogger… :(

    (De momento no me complico más la vida con un dominio y un hosting propio)

    Muchas gracias por aclararmelo, Natali.

  5. hola tengo un problema con manejo de enlaces, veran en la pagina principal tengo un enlace que se llama NOTICIAS SIFE direcciona a una pagina que se llama FACULTAD, en esa pagina tengo varias secciones que muestro con jquery cuando se entra a la pagina de FACULTAD la seccion predeterminada que se ve es BIENVENIDA, hay una navegacion lateral con las demas secciones si pinchan en cualquiera muestra esa seccion, cargo el div con jquery y a dicha seccion(que es una lista) le cargo una clase que le pone la flechita verde para indicar que sea seccion se esta vieno, bueno mi problema… que cuando se da clic en NOTICIAS SIFE necesito que se habra la pagina de FACULTAD pero en la seccion de SIFE y no la de BIENVENIDA que es la que siempre me carga…. como le hago! ayuda espero puedan ayudarme

  6. Gracias por compartir tus conocimientos!

    Tenia una duda, a ver si tiene facil solucion porque no conozco en absoluto jquery. Cuando cargas la pagina 2 veces (porque es un menu que aparece por iframe), el funcion de desplegar el menu, no funciona. De echo, ni tan siquiera ejecuta la funcion jquery para desplegar el menu.

    Cualquier idea que pudiera ayudarme seria bienvenida. Muchas gracias por todo :)

  7. En lugar de usar load usa append y empty de jquery por que al usar load cargas un nuevo documento y no lo estas uniendo al que ya tienes, eso me causo muchos problemas al momento de cargar un documento a que cargaba un documento b y al tratar de usar la misma tecninca para que cargara el documento b a un documento c siendo que ya estaba adentro de un documento a , no funcionaba , solo es un consejo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *