redireccionar - Rails 3.1 está devolviendo código Javascript sin formato cuando se usa el botón de retroceso

volver a pagina anterior con js

Question

Mi meta basica

Una aplicación de Rails que puede cargar contenido nuevo a través de Ajax mientras usa HTML5 para mantener el estado histórico del navegador. Tengo una versión super básica de la aplicación que se ejecuta en Heroku. También he configurado un repositorio público de GitHub para que se pueda ver con más detalle todo el código que se menciona a continuación.

El problema

Implementé con éxito la aplicación básica utilizando la API del historial del navegador HTML5 (en un momento también hice una versión utilizando el complemento History.js jQuery). Todo funciona como debería hasta que el usuario haga clic en un enlace que no sea ajax y luego presione el botón Atrás. Por ejemplo, si el usuario hizo clic en el elemento 2, la aplicación carga con éxito el nuevo contenido y cambia el estado del navegador. Si presionan el botón Atrás, también vuelve a cargar correctamente el contenido anterior y cambia el estado del navegador para que coincida. Pero si el usuario navega a otra página web (cualquier otra página en Internet) y luego hace clic en el botón de retroceso de su navegador, la aplicación Rails muestra el javascript en lugar de la página original.

Todo funciona hasta ese último paso, cuando el controlador comienza a devolver el javascript en bruto de show.js.erb en lugar de show.html.erb. He intentado cambiar varias configuraciones en el controlador, pero no puedo averiguar qué está causando esto específicamente. Sé que si elimino la llamada history.pushState en show.js.erb, el problema se detiene (aunque, obviamente, pierdo toda la funcionalidad del historial del navegador que estaba buscando en primer lugar).

¿Algunas ideas?

Bonificación: Detalle insoportable

Así es como funciona todo (creo!).

El usuario hace clic en un enlace, que se ve así debajo del capó:

<%= link_to number_to_human(volume.number), volume_path(volume), :remote => true %>

Esto envía una solicitud de javascript al controlador, que se ve así:

def show
  @volume = Volume.find(params[:id])

  respond_to do |format|
    format.html # show.html.erb
    format.js # show.js.erb
    format.json { render json: @volume }
  end
end

Esto pasa la solicitud a show.js.erb que se ve así:

var stateObject = {"html": "<%= escape_javascript render(@volume) %>"};
history.pushState(stateObject,'''',"<%= escape_javascript volume_path(@volume) %>");
$(''#volumes'').fadeTo(0, 0);
$(''#volumes'').html(stateObject.html).fadeTo(''slow'', 1.0);

El cual luego reemplaza el contenido de una etiqueta div en la página original y usa pushState para crear un objeto de estado y cambiar la URL de la página.

Luego, el usuario puede hacer clic en el botón Atrás y javascript adjunto al evento window.onpopstate en show.html.erb volverá a cargar el contenido apropiado:

    if(history.pushState) {
    window.onpopstate = function(event) {  
        if (event.state != null) {
            $(''#volumes'').html(event.state.html);
        }
    }
}

Answer 1

Lo que Joon dijo arriba definitivamente funcionó. Acabo de agregar una comprobación adicional para ver si la solicitud era de ajax antes de agregar los encabezados. Gracias Joon!

if request.xhr?
    response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
    response.headers["Pragma"] = "no-cache"
    response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
end

Answer 2

Soy muy nuevo en RoR, así que no estoy seguro de si mi respuesta sería la mejor, pero me encontré con el mismo problema y logré solucionarlo. Así que aquí están mis dos centavos.

Parece que la respuesta ajax sin formato ocurre debido a la caché del navegador. Solucioné el problema agregando el siguiente encabezado para evitar que la respuesta comenzara a almacenarse en caché.

response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
response.headers["Pragma"] = "no-cache"
response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"