RSS

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.

link de descarga.

[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.

[source:xhtml]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





cargar un ejemplo
cargar ejemplo 2
cargar ejemplo 3

aki se recarga la pagina



[/source]

Ahora bien como hacemos para que usando ajax podamos hacer funcionar el boton atras?
Lo explico dentro del codigo.
entonces tenemos que.

[source:javascript]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





cargar un ejemplo
cargar ejemplo 2
cargar ejemplo 3

aki se recarga la pagina


[/source]

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

[source:php]

var_dump($_GET);

[/source]

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

, , ,

This post was written by:

Ajaxman - who has written 571 posts on Ajaxman.


Contact the author

10 Comments For This Post

  1. dave Says:

    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.

  2. Seraphinux Says:

    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.

  3. chuky Says:

    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

  4. Ajaxman Says:

    @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/

  5. chuky Says:

    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.

  6. Ajaxman Says:

    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.

  7. emulation Says:

    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

  8. emulation Says:

    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..

  9. Ajaxman Says:

    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

  10. emulation Says:

    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

Leave a Reply