Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js
Lo primero es invocar a jquery y a sammy, algo como:
1 2 |
Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:
1 2 3 4 5 6 7 8 |
Antes de complicar las cosas veamos como luce la versión más simple:
1 2 3 4 | var ratPack = $.sammy(function() { this.element_selector = '#content'; // todas nuestras rutas irían aquí }); |
En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:
1 2 3 4 | this.get('#/inicio', function(context) { context.app.swap(''); context.$element().append('<h1>inbox</h1>'); }); |
Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI
Para el envío de formularios usando el método POST el código sería algo así:
1 2 3 4 5 | this.post('#/formulario', function(context) { context.app.swap(''); var to = this.params['to']; context.$element().append('<h1>hola ' + to + '</h1>'); }); |
Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI
saludos y gracias por los aportes.
Es posible con esta librería o con otra que cuando se presione el botón atrás no se pierda el contenido jquery, ??
por ejemplo en index.php pongo dos listas desplegables (la segunda depende de la primera) y luego presiono un boto que lo lleve a mostrar.php, estando allí, hago click en el botón atrás del navegador para ir nuevamente a index.php y me doy cuenta que la selección de la lista 2 ya no esta,
es posible devolverme y que el contenido de las dos listas siga igual ??