Linea de Codigo

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imagenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Para poder hacer esto en HTML, lo primero será poner una imagen. Para ello nos basamos en la etiqueta IMG:

<img src="casarural.jpg" alt="Los Tejos" />

Acordaros, como buena práctica, el poner un texto alternativo a la imagen con el atributo alt.

Ahora tendremos que recubrir el código de la imagen con un código de enlace. Para los enlaces nos basamos en la etiqueta A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

<a title="Los Tejos" href="http://www.lostejos.com"><img src="casarural.jpg" alt="Los Tejos" /></a>

En unas pocas líneas vamos a ver lo sencillo que es repaginar utilizando jQuery y AJAX. El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.

En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:

datos.php?pagina=1 //Nos devolverá la primera página
datos.php?pagina=5 //Nos devolverá la quinta página

En posteriores artículos entraremos en detalle de como construir esta página con PHP de forma sencilla. Pero de momento nos vamos a centrar en el desarrollo de la parte cliente con jQuery para realizar peticiones AJAX.

Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.

 
<div id="mensajes"></div>
 
<button id="anterior">Anterior</button> | <button id="siguiente">Siguiente</button> 

Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.

La inicialización de jQuery, tan sencilla como una línea:

<script type="text/javascript" src="jquery.js"></script>

De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:

var pagina=1;

La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.

Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery. La codificación de los botones será muy sencilla. Los pasos que seguirán serán.

1. Decrementar el valor de una variable general llamado página
2. Llamar a una función cargardatos(); la cual implementará las peticiones AJAX

El código quedará de la siguiente manera:

$("#anterior").click(function() {
  pagina--;
  cargardatos();
});
 
$("#siguiente").click(function() {
  pagina++;
  cargardatos();
});

Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.

El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando

"datos.php?pagina="+pagina;

El segundo parámetro de la función .get() es un función que recibe un parámetro data con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa "mensajes". Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.

function(data){
  if (data != "") {
    $("#mensajes").html(data);
}

Así, el código completo de la función cargardatos() quedará de la siguiente forma:

function cargardatos(){
  $.get("datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $("#mensajes").html(data);
    }
    }
  );
}

Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX... resuelto.