Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery load(): cargar un html externo en un div

En ocasiones necesitamos actualizar cierta parte de la página sin tener que refrescarla, una función que suelo utilizar con frecuencia es jQuery load().

Función obsoleta

Esta función ha quedado obsoleta a partir de la versión 1.8 de jQuery, si necesitáis cargar contenido externo y enviar parámetros podéis usar la funciones get() y post().

Funcionalidad

Con jQuery load() podemos cargar en un determinado div un archivo externo (php, html, asp…) en el momento que necesitemos o bajo petición del usuario mediante formularios, botones, enlaces…

Este archivo externo al script deberá estar alojado en el mismo dominio de la web.

Otras funciones de jQuery interesantes son: jQuery animate(), jquery show() y hide(), jQuery toggle() y jQuery html().

Sintaxis de jQuery load()

  1. url: es la cadena que contiene la url a cargar. (obligatoria).
  2. data: parametros que podemos pasar para ser tratados por el destino de la url. (opcional).
  3. callback: función invocada después de procesarse la url. (opcional).

Este método es una sencilla manera de obtener datos del servidor desde el mismo HTML, se parece bastante a $.get(url, data, success), load() es un método y la get() una función global.

En las demos que os pongo a continuación vamos a forzar dicha carga externa mediante la función jQuery Click(), que se ejecutará cuando se pulse el botón.

Ejemplo 1 de jQuery load() pasando como parámetro la url

  1. Primera demo de ejemplo del script.
  2. Línea 5: referenciamos la libreria jQuery.
  3. Script línea 8: Tal y como comento en el código, cuando se clicke el botón con id=boton cargaremos el archivo ‘/demos/03-jquery-load01.php’ en el div con id=capa.
  4. Línea 17: Div que actualizaremos con el nuevo contenido, cuyo id=capa.
  5. Línea 19: Botón con id=boton que será el ejecutor del script.
  6. El archivo externo ‘/demos/03-jquery-load01.php’ contiene el texto ‘TEXTO ACTUALIZADO!!!!’.

Ejemplo 2 de jQuery load() con parametros y callback

  1. Segunda 2 de ejemplo del script.
  2. Me voy a centrar en la diferencia que hay con el script anterior.  A partir de la línea 11 he puesto que se cargue el archivo externo, he pasado 2 variables y pregunto si se ha ejecutado correctamente.
  3. Envío de variables: en el ejemplo veréis que paso valor1 y valor2 con su contenido, este envío se hace por POST, si queremos hacer un envío por GET tendriamos que poner las variables seguidas de la url. Ejemplo:
    load(«/demos/2013/03-jquery-load03.php?variable1=primervalor&variable2=segundovalor»
  4. Callback: En la misma llamada pregunto por el ‘status‘ de la carga del archivo, si hay error cargo en el mismo div el error.
    Importante y a tener en cuenta es que el callback nos devuelve el estatus e independientemente si el archivo existe o no… el script se ejecuta.
    Aquí solo sacamos el error para que nos demos cuenta del mismo, de lo contrario no se cargaría nada ni se vería el tipo de error.
  5. Archivo destino: solamente saco los 2 valores enviados por POST.

Ejemplo 3 de jQuery load() para obtener cierto contenido del html externo

  1. Tercera demo de ejemplo del script.
  2. Línea 11: si nos fijamos despues de la url he puesto #contenido, ese será el contenido del id del html externo que heredaremos para nuestra página actual. El resto se ignora.
  3. El html externo tiene la siguiente maquetación:
  4. Podéis probar la demo y ver que efectivamente solo coge el contenido del id=»contenido».

Cargar el HTML externo al hacer click en un enlace de texto

Otro ejemplo práctico en esta nueva cuarta demo para cargar un html externo una vez clickado un enlace de texto, aquí el código:

Evitar conflictos con otras librerías

En caso de trabajar con otras librerías distintas a jQuery os recomiendo en caso de problemas usar jQuery noConflict().

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies