Boton atras con ajax, usando Jquery y JqueryHistory

Cuando empezamos con ajax, nos encontramos algunos problemas, que pueden ser solucionados con algo de practica, sin embargo algo que nos puede traer muchos dolores de cabeza, es sin duda, manejar el historial de nuestra pagina, es decir que si un usuario carga una sección con ajax, pueda regresar a donde estaba antes.

Esto sin duda resulta muy difícil de manejar, claro que si todos los navegadores siguieran los estándares, no habría mayor problema, ya que se pueden utilizar hashes, pero recordemos que por desgracia existe un navegador, llamado Internet Explorer, para el cual hay que hacer pequeños hacks, para hacer que todo funcione.

Ahora vayamos a la solución de este problema, con ayuda de un ejemplo.

Primero debemos de tener la libreria Jquery, tambien deberemos bajarnos el plugin Jquery History

Los pueden bajar desde el sitio de Jquery o bien desde el blog.

link de descarga

Ahora vamos ha realizar la pagina web donde mostraremos dinamicamente el funcionamiento del boton atras para empezar, la pagin web que vamos a crear le incluimos las correspondientes librerias, en este caso, la libreria Jquery y el plugin Jquery History, ademas de 3 elementos anchor (enlaces) los cuales nos serviran para decir a donde vamos a ir o mas bien que es lo queremos recargar, ademas de un div donde veremos el resultado de nuestro proyecto y por ultimo necesitamos un atributo que identifique a estos enlaces, este lo asignamos mediante la propiedad rel, a la cual le llamaremos rel=”history”.

Asi pues entonces tenemos la pagina html siguiente.

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<script type=”text/javascript” src=”scripts/jquerylite.js”></script>
<script type=”text/javascript” src=”scripts/jquery.history.js”></script>
<script type=”text/JavaScript”>
<!–
//este espacio es para nuestro javascript.
//–>
</script>
</head>

<body>
<a href=”#ejemplo1″ rel=”history”>cargar un ejemplo</a><br />
<a href=”#ejemplo2″ rel=”history”>cargar ejemplo 2</a><br />
<a href=”#ejemplo3″ rel=”history”>cargar ejemplo 3</a><br />
<div id=”resultados”>
aki se recarga la pagina
</div>
</body>
</html>

Ahora bien como hacemos para que usando ajax podamos hacer funcionar el boton atras?

Lo explico dentro del codigo.
entonces tenemos que.

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<script type=”text/javascript” src=”scripts/jquerylite.js”></script>
<script type=”text/javascript” src=”scripts/jquery.history.js”></script>
<script type=”text/JavaScript”>
<!–
/*
*Primero usamos la funcion $(document).ready(function(){});
*Con esta funcion le indicamos que ejecute una funcion en cuanto el dom este cargado
*con esta funcion $.historyInit(pageload); le decimos Jquery que use el plugin “History” y que
* ademas se relacione y envie la siguiente informacion a la funcion “pageload”
* $(“a[@rel=’history’]”).click(function(){}); con esto le decimos a Jquery que todos los elementos
*a (anchor) con un atributo rel([@rel]) que tenga como valor history, les agrege una funcion.
* var hash = this.href; con esto le indicamos que cree una varible llamada hash en donde se guarde la direccion que estamos enlazando
*hash = hash.replace(/^.*#/, ”); con esto le decimos que reemplaze todos los simbolos # de la variable hash
*$.historyLoad(hash); esto sirve para indicarle a Jquery que ejecute e inicie la funcion historyLoad usando como parametro
*la variable hash, y por ultimo
*le decimos que retorne falso para que no nos lleve a la direccion web que tenemos en el enlace
*/

$(document).ready(function(){
$.historyInit(pageload);
$(“a[@rel=’history’]”).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, ”);
$.historyLoad(hash);
return false;
});
});

/*
* aqui mostraremos como usar la funcion pageload
* primero recibe un hash osea la direccion que se guardo en la barra de direcciones algo como
* #ejemplo1 que es lo que nos indicara que pagina vamos a cargar
*/
function pageload(hash)
{
var cache_not=Math.random();
/*
*Si recibi un hash le decimos que ejecute algo
*/
if(hash)//si recibe un hash
{
/* la funcion $(“div_id”).load(pagina), carga via ajax una pagina que le indiquemos en el div
* identificado con el id que le proporcionamos entre parentesis
* NOTA IMPORTANTE: esta funcionalidad solo permite usar ajax mendiate metodo post
*/
$(“#resultados”).load(“proceso.php?id=”+hash);
}
else
{
/* en caso de que no reciba un hash le podemos decir que escriba cualquier cosa en el div.
* o que cargue cualquier otra pagina si lo deseamos como se ve en los 3 siguientes ejemplos.
* yo solo usare el 3ro
*/
//$(“#div_id”).load(“pagina.php?var”+var); =ajax
//$(“#div_id”).html(“lo que quieras en html<hr />”);
$(“#resultados”).html(“<hr />No hay hash<hr />”);

}
}
//–>
</script>
</head>

<body>
<a href=”#ejemplo:1″ rel=”history”>cargar un ejemplo</a><br />
<a href=”#ejemplo:2″ rel=”history”>cargar ejemplo 2</a><br />
<a href=”#ejemplo:3″ rel=”history”>cargar ejemplo 3</a><br />
<div id=”resultados”>
aki se recarga la pagina
</div>
</body>
</html>

Ahora tenemos la pagina proceso.php que no hara otra cosa mas que mostrarnos la variable que le enviamos por el metodo get.

var_dump($_GET);

Listo con esta corta pero clara explicacion ya tenemos funcionando nuestro ajax con boton atras.
Nota Importante: como debemos hacer que funcione el boton atras, notara , claro si lo examina bien, que cada carga de ajax la realiza dos veces, esto es porque usa iframes para lograr esta funcionanildad en Internet explorer, asi que ese sera el unico pero!!!.

Bien les comento que en breve pondre un ejemplo paar que vean como funciona, y los codigos a descargar.

Dejar un comentario

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