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.
[Actualizacion]
Gracias a nuestro querido lector @chuky, he descubierto un error bastante grave, resulta que el ejemplo no funciona.
Y eso sucedio por una simple y sencilla razon, el plguin que les pase funciona con Jquery pero de diferente forma les dejo el correcto.
El verdadero enlace del plugin es este: http://www.mikage.to/jquery/jquery_history.html
Si desean probar el otro tambien se los dejo
Y el plugin lo pueden descargar desde aqui.
http://www.stilbuero.de/jquery/history/
[/Actualizacion]
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"> <script src="scripts/jquerylite.js" type="text/javascript"></script> <script src="scripts/jquery.history.js" type="text/javascript"></script> <script type="text/JavaScript">// <![CDATA[ //este espacio es para nuestro javascript. // ]]></script> <a rel="history" href="#ejemplo1">cargar un ejemplo</a> <a rel="history" href="#ejemplo2">cargar ejemplo 2</a> <a rel="history" href="#ejemplo3">cargar ejemplo 3</a> <div id="resultados"> aqui se recarga la pagina </div>
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">
<script src="scripts/jquerylite.js" type="text/javascript"></script>
<script src="scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/JavaScript">// <![CDATA[
/*
*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");
$("#resultados").html(" <hr />No hay hash <hr />");
}
}
// ]]></script>
<a rel="history" href="#ejemplo:1">cargar un ejemplo</a>
<a rel="history" href="#ejemplo:2">cargar ejemplo 2</a>
<a rel="history" href="#ejemplo:3">cargar ejemplo 3</a>
<div id="resultados">
aqui se recarga la pagina
</div>
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.
comentarios???? dudas?? dejenlas (valga la redundancia) en lo comentarios.
[Actualizacion] gracias a @chuky me ha hecho ver el error, de que no puse el enlace de descarga, pero ya esta arregaldo, gracias nuevamente
Related posts:
- [Ajax] mcDropdown: Mejorando las listas desplegables con Jquery Después de varios días sin postear por tener mucho trabajo,...
- [Javascript] Menú deslizante usando Jquery El seraphinux ultimamente le ha dado por escribir mas que...
- [Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax Leyendo el blog de Andrés Nieto veo una nueva iniciativa...
- [Ajax] Comparacion de librerias Jquery y Prototype Seguramente muchos hemos usado alguno libreria Ajax ó JS, para...
- [Javascript - Jquery] Jhon Resig: aprendiendo javascript, y jQuery Mientras siguo desarrollando el proyecto que me ha llevado mas...
Related posts brought to you by Yet Another Related Posts Plugin.
16 Responses
tengo unas dudas sobre ajax y queria saber donde puedo ponerme en contacto contigo a parte de estos comentarios. mi duda es acerca de por que no me funcionan los scripts de una pagina cuando la inserto en un div de otra mediante ajax. no se si en tu pagina has puesto algo al respecto,gracias.
Me consta que la solucion del chabs funciona genialmente, de hecho cuando hecho a andar un proyecto flash con eso del “boton atras” fue incrible. Me consta.
Por cierto chabs, mas vale que lo que gane con mis comentarios valga la pena. No vaya a ser que me regales un lapiz o algo asi xDDDDD
Saludos.
buena e estado leyendo tu tutorial y me parece muy bien pero no encuentro el plugin jquery history me podrias decir de donde me lo puedo dajar para poder probar tu ejemplo
@chuky, ya actualice, el post, de todos modos te dejo los links de descarga, y gracias por el comentario.
Jquery 1.2.3.
Y el plugin lo pueden descargar desde aqui.
http://www.stilbuero.de/jquery/history/
ajaxman gracias por la direccion ya descarge el history pero lo estuve probando y me aparece indefinido la funcion $.historyInit(pageload); contal que ya resolvi con el ejemplo que trae la libreria pro te escribo por si es un proble con tu codigo o es que no implemente bien la libreria.
lo que pasa es que quiero saber si a ti te funciono a mi tambien me tiene quer funcionar.
Gracias nuevamente, @chuky, te comento rapidamente, actualmente estoy estudiando varias cosa por eso he descuidado un poco el blog, y te comento esto por que la regue nuevamente, jajaja, pero no se preocupen que ya estoy terminando un muy buen material.
Resulta que el ejemplo que te di si, funciona, pero el plugin no, osea.
El ejemplo que use, usa otra libreria no la que puse, te dejo el link, corregido en el post, y tambien te lo dejo aki,
http://www.mikage.to/jquery/jquery_history.html
y puedes checar el funcionamiento en esta pagina http://internext.com.mx/ esa pagina la realize yo con Jquery y Jquery history.
hola, alguna manera de implementar esto pero sin usar un archivo php???
Yo veo aplicaciones en java… y como que no sabria que hacer… ademas no incluyes el codigo de la pagina php… :s
ahh vaya parece que si pusiste el codigo php jejeje pero aun no entiendo como implementar esto mismo pero en java… >_< supongo sera haciendo un jsp con scriptlets con algun codigo similar a este..
Hola @emulation:
Apenas vi tus comentarios, es que como estoy en el trabajo casi no puedo escribir mucho, y si puse codigo php, y como dices
“supongo sera haciendo un jsp con scriptlets con algun codigo similar a este..”
Tienes toda la razón, de esa forma puedes empezar a usa jquery(ajax) ,con jsp, o servlets, por cierto tengo un compañero, que desarrolla con jsp y me ha comentado que Jquery le ha servido muchismo.
Saludos y suerte
vaya despues de muchisimo tiempo leo tu respuesta jejejejeje
Aun no he podido probar tu ejemplo, pero espero hacerlo muy pronto, ya que estoy en un curso de ajax con php y bueno ahora ya entiendo algunas cosillas
cualquier cosa ya estare molestandote jejejeje
Saludos y gracias por responder
hola!
trate de poner en mi pagina este ejemplo, pero no me funciona :S creo estoy mal en la pagina php (proceso.php) no se si puse bien la variable.
podrias orientarme?
este es el script que puse
<!–
$(document).ready(function(){
$.historyInit(pageload);
$(”a[@rel='history']“).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, ”);
$.historyLoad(hash);
return false;
});
});
function pageload(hash)
{
var cache_not=Math.random();
if(hash)
{
$(”#contenido”).load(”proceso.php?id=”+hash);
}
else
{
$(”#contenido”).html(”No “);
}
//–>
Hola Ajaxman
estoy usando este plugin y tengo un problema, no me funciona cuando tengo links en el interior de una pagina cargada con ajax por este mismo metodo, este problema lo tengo solo en IE.
Tambien estube revisando el sitio http://internext.com.mx/ y note que en la seccion portafolios haces algo asi y si funciona, por favor necesito orientacion de como hacer que tambien funcione con enlaces en el interior de una pagina cargada con ajax y jquery history.
Gracias de antemano
Hola.
Me ocurre lo mismo que a Sauce. No consigo que me funcionen los enlaces en el interior de una página cargada con ajax y jquery history en IE. En Firefox en cambio sí funciona, pero necesito que funcione en IE :S
¿Qué se puede hacer?
Gracias.
Sauce, Pedro.
Creo que el problema está en el doctype. Si se pone en el doctype:
en vez de xhtml, en internet explorer funciona bien. No sé porque da problemas con xhmtl.
Si alguien sabe como arreglarlo con xhtml que avise, por favor.
Saludos
En el mensaje anterior a pesar de poner el doctype no se ve. Me refería al doctype de HTML 4.0 que es el que esta puesto en la web:
http://www.mikage.to/jquery/jquery_history.html
[...] Si usas AJAX, intenta implementar una solución para que los usuarios puedan usar el boton atras del navegador, y tener una URL distinta para cada contenido cargado. JQueryHistory es una alternativa. [...]