2012-07-30 17 views
6

Actualmente estoy usando Code Igniter para tener URL bonitas, y tengo este sistema que básicamente usa ajax para permitirle buscar gimnasios.Cómo volver a cargar la página cuando se presiona atrás, después de un pushState?

Im con el estado de empuje después de una lista de gimnasios se carga, como este:

example.com/list/search_key/pagination-page/sort-by/filters~seperated~by~that

Donde search_key es la ciudad, el estado o el vecindario en el área en la que desean buscar los gimnasios, y los filtros son casillas de verificación individuales.

Qué sucede, uso .ajax para enviar la clave de búsqueda y cada valor de casilla de verificación individual (1 o 0) a través de publicación, luego el encendedor de código usa los datos POST y PHP para generar una url como la anterior. El empuje de éxito de Ajax indica que la URL es la que generó PHP.

El problema es que si usa decir paginación para ir a la página-2, y quiere ir a la página-1, naturalmente va a utilizar el botón de retroceso de los navegadores. El problema es que solo respalda la barra de direcciones URL de la url antes de la actual, en realidad no cambia el contenido de las páginas. Lo necesito para volver a cargar la página usando la url anterior (anterior), o actualizar, o algo así.

Incluso puedo usar ajax para volver a enviar el formulario usando los datos URL, pero no tengo ni idea de cómo hacerlo.

He intentado algunas cosas, pero nada funciona en absoluto. Prácticamente lo he intentado todo en la primera página de Google, y todo parece prometedor, pero en realidad nada funciona.

¿Hay alguna forma de actualizar la página, si una url de pushstate cambia a una url previa?

PS Heres algunas de las principales cosas que he intentado:

<script type="text/javascript"> 
$(window).unload(function(e){ 
    e.preventDefault(); 
    alert("Back was pressed!"); 
}); 
// If this wouldve worked, it wouldve atleast alerted me that. 

// The code off this URL: http://www.mrc-productivity.com/techblog/?p=1235 

// Some of the codes off this URL: http://forum.jquery.com/topic/howto-force-page-reload-refresh-of-previous-page-when-back-button-is-pressed 

// A few others. 
</script> 

Respuesta

14

Puesto que usted está empujando el estado de su método de éxito ajax, puede detectar el botón de retroceso con el método window.onpopstate.

Tenga en cuenta que simplemente al llamar a history.pushState() o history.replaceState() no se activará un evento de estado emergente. El evento popstate solo se desencadena al realizar una acción del navegador, como hacer clic en el botón Atrás (o invocar history.back() en JavaScript).

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html"); 

window.onpopstate = function(event) { 
    if(event && event.state) { 
     // event.state.foo 
    } 
} 
+0

Todavía no entiendo muy bien el concepto. Entiendo que debe llamar al estado por estado, pero el código anterior solo funciona si presiona el botón de avanzar. También encontré esta página: http://stackoverflow.com/questions/7888711/page-not-reloading-via-back-when-using-pushstate-onpopstate Que si vas a su ejemplo de jsfiddle: http: // jsfiddle. net/pimvdb/CCgDn/1/Funciona para él, pero si copio/pego el código, solo se alerta "estado inicial". ¿Qué estoy haciendo mal? –

+1

Nota Obtuve lo correcto para trabajar, pero agregué location.reload(); donde pones event.state.foo, que es exactamente lo que quiero hacer, pero necesito hacerlo cuando también se presiona el botón Atrás. –

+1

No importa. Pobre error de operación del usuario. Lmao, muchas gracias. Aprecio la ayuda. Funciona perfectamente con location.reload(); –

Cuestiones relacionadas