Blog de Alejandro More

jueves, octubre 02, 2008

AJAX con JQuery, imagen cargando....

Hace algún tiempo estoy usando AJAX pero con unas librerias que encontre en ajax hispano y de un libro de anaya multimedia. Pero se me ocurrio de usar algunas librerias con mas funcionalidades y por eso decidi usar JQUERY. Una libreria muy conocida de javascript con soporte para ajax.
Encontre en internet sin problemas documentación de como usarla, pero siempre he dicho que la mejor forma de aprender es con ejemplos xD. Lo que no encontre es un ejemplo con una implementacion que solucione el problema del historial (funciones atras, adelante y recargar del navegador) y que muestre una imagen o un mensajes mientas la funcion de ajax trae la información para reemplazar el bloque, pero gracias a la ayuda de un amigo pude hacer esa funcionalidad. Asi que aqui les va un pequeño ejemplo.

Requisitos:

- Enlazar los siguientes archivos a nuestra pagina web:
jquery-1.1.3.1.pack.js -> en www.jquery.com
jquery.history_remote.pack.js -> en www.stilbuero.de/jquery/history

- Añadir esta segmento en nuestra pag:

<script type="text/javascript">

$(function() {

var x=$("#contenido");

x.ajaxStart(inicioEnvio);

$('a.remote').remote('#contenido');

$.ajaxHistory.initialize();

});

function inicioEnvio(){

var x=$("#contenido");

x.html('<img src="imagenes/cargando.gif">');

}

</script>





Donde:
"contenido", es un segmento con identificador contenido donde se hara el cambio, ejemplo: <div id="contenido"></div>

"imagenes/cargando.gif", es la imagen que se mostrará mientras se hace el cambio
"a.remote", es nuestro codigo, todos los enlaces que deseo que usen la funcion ajax deben tener la clase remote, ejemplo:

<a href="enlace1.html" class="remote">Enlace 1</a>


Un ejemplo del codigo HTML sería:

<html>

<head>

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

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

<script type="text/javascript">

$(function() {

var x=$("#contenido");

x.ajaxStart(inicioEnvio);

$('a.remote').remote('#contenido');

$.ajaxHistory.initialize();

});

function inicioEnvio(){

var x=$("#contenido");

x.html('<img src="imagenes/cargando.gif">');

}

</script>

</head

<body>

<a href="enlace1.html" class="remote">Enlace 1</a><br>

<a href="enlace2.html" class="remote">Enlace 2</a><br>

<a href="enlace3.html" class="remote">Enlace 3</a><br>

<div id="contenido">

</div>

</body>

<html>

publicadas por Magno a la/s 12:11 p. m. | 0 Comentarios