Categorías: jQuery

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()

.load( url [, data] [, callback(responseText, textStatus, XMLHttpRequest)] )

url: es la cadena que contiene la url a cargar. (obligatoria).
data: parametros que podemos pasar para ser tratados por el destino de la url. (opcional).
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

<html>
 <head>
  <title>jQuery Load</title>
  <!-- Libreria jQuery -->
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <!-- Acción sobre el botón con id=boton y actualizamos el div con id=capa -->
  <script type="text/javascript">
   $(document).ready(function() {
    $("#boton").click(function(event) {
     $("#capa").load('/demos/03-jquery-load01.php');
    });
   });
  </script>
 </head>
 <body>
 <div id="capa">Pulsa 'Actualizar capa' y este texto se actualizará</div>
 <br>
    <input name="boton" id="boton" type="button" value="Actualizar capa" />
 </body>
</html>

Primera demo de ejemplo del script.
Línea 5: referenciamos la libreria jQuery.
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.
Línea 17: Div que actualizaremos con el nuevo contenido, cuyo id=capa.
Línea 19: Botón con id=boton que será el ejecutor del script.
El archivo externo ‘/demos/03-jquery-load01.php’ contiene el texto ‘TEXTO ACTUALIZADO!!!!’.

Ejemplo 2 de jQuery load() con parametros y callback

<html>
 <head>
  <title>jQuery Load</title>
  <!-- Libreria jQuery -->
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <!-- Acción sobre el botón con id=boton y actualizamos el div con id=capa -->
  <script type="text/javascript">
   $(document).ready(function() {
    $("#boton").click(function(event) {
     $("#capa").load("/demos/2013/03-jquery-load03.php",{valor1:'primer valor', valor2:'segundo valor'}, function(response, status, xhr) {
        if (status == "error") {
          var msg = "Error!, algo ha sucedido: ";
          $("#capa").html(msg + xhr.status + " " + xhr.statusText);
        }
      });
    });
   });   
  </script>
 </head>
 <body>
 <div id="capa">Pulsa 'Actualizar capa' y este texto se actualizará</div>
 <br>
    <input name="boton" id="boton" type="button" value="Actualizar capa" />
 </body>
</html>

Segunda 2 de ejemplo del script.
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.
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»
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.
Archivo destino: solamente saco los 2 valores enviados por POST.

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

<html>
 <head>
  <title>jQuery Load</title>
  <!-- jQuery lib -->
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <!-- Action on the button with id=button and update the div with id=layer -->
  <script type="text/javascript">
   $(document).ready(function() {
    $("#button").click(function(event) {
     $("#layer").load('/examples/03-jquery-load05.php #content');
    });
   });
  </script>
 </head>
 <body>
 <div id="capa">Pulsa 'Actualizar capa' y este texto se actualizará</div>
 <br>
    <input name="boton" id="boton" type="button" value="Actualizar capa" />
 </body>
</html>

Tercera demo de ejemplo del script.
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.

El html externo tiene la siguiente maquetación:

<div id="contenido">CONTENIDO QUE TIENE QUE APARECER</div>
<div id="no">ESTO NO DEBE APARECER</div>

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:

<script type="text/javascript">
 $(document).ready(function() {
  $("#boton2").click(function(event) {
   $("#capa").load('/demos/2013/03-jquery-load01.php');
  });
 });
</script>