4

Estoy haciendo uso del History API (con pushState) para manipular mi contenido en una sola página. La página posee un campo de búsqueda que va mostrando una lista de términos a medida que coinciden los caracteres ingresados por el usuario. Luego al presionar la tecla enter o hacer clic en el botón buscar se ve el contenido para ese término buscado (todo siempre en la misma página y haciendo uso de AJAX para no recargar toda la página), quedando la URL por ejemplo http://localhost:81/ApiHistory/Inteligencia_artificial para el caso que la búsqueda sea "Inteligencia artificial", si ingresa de nuevo otro término por ejemplo "Computadora" ahora la URL quedaría http://localhost:81/ApiHistory/Computadora y si presiona para atrás en el navegador la misma vuelve a cambiar a http://localhost:81/ApiHistory/Inteligencia_artificial haciendo uso de popState.

Ahora sólo me falta una cosa: Que al actualizar la página se muestre el contenido que coincide con la URL. Es que si la URL dice http://localhost:81/ApiHistory/Computadora y presiono el botón de actualizar no hace nada y me pone el error "Objeto no localizado", como un 404 (página no encontrada). Y si allí mismo quiero ir para atrás, me pasa lo mismo, ya no puedo ver el contenido anterior. Estoy trabajando localmente y me falta solucionar esto para poder subirlo al servidor. Les paso mi código de JavaScript (utilizando JQuery) que está en mi index:

$(document).ready(function () {                            
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        state=state.split("_").join(" ");
        document.title = state+" - Mi sitio";
        showHint(state);
    }else{$("#Contenido").empty();
         }  
});

$('#boton').on('click', function (e) {
e.preventDefault();
var Term = document.getElementById("Termino").value;
   if (Term !== '') {
       document.title = Term+" - Mi sitio";
       Term=Term.split(" ").join("_");
        showHint(Term);
        history.pushState(Term,Term+" - Mi sitio",Term);
        e.preventDefault();
   }
});

$("#Termino").keypress(function(e){
if(e==13||e.which==13){
    e.preventDefault();
    var d=document.getElementById("Termino").value;
    if(d!==''){
        document.title = d+" - Mi sitio";
        d=d.split(" ").join("_");
        showHint(d);
        history.pushState(d,d+" - Mi sitio",d);
        e.preventDefault();
        $("#radio").buttonset({disabled:null});
        return false;
    }
}});
 $(document).on('click', '#GloIT', function (e) {    
     e.preventDefault();
     var $this = $(this),
     def = $this.attr("href"); 
     if(def!==''){
        def=def.split("_").join(" ");
        document.title = def+" - Mi sitio";
        showHint(def);
        def=def.split(" ").join("_");
        history.pushState(def,def+" - Mi sitio",def);
        e.preventDefault();
        $("#radio").buttonset({disabled:null});
        return false;
      }
   });
 });

Aquí hay varios eventos (los dos que se generan por clic y el del enter) y que básicamente hacen lo mismo, eso está funcionando bien. Todos llaman a la función showHint(Termino a buscar) que es la que trabaja con AJAX y después mediante PHP muestra el contenido. También al principio está el código para el popstate. Todo esto funciona perfecto, el problema está al refrescar la página, como ya comente al principio. Intente poner la función showHint() suelto dentro de $(document).ready(function () { pero nunca entra allí, también intente poner código dentro de la función function load_content(){ pero nada de nada.

Lo que me doy cuenta es que si yo por ejemplo recargo la página como http://localhost:81/ApiHistory/ si entra a $(document).ready(function () { pero si recargo la página http://localhost:81/ApiHistory/Computadora no entra a $(document).ready(function () {.

¿Alguien sabe como puedo hacer lo de refrescar?

2 respuestas 2

4

La solución no depende tu código, sino del servidor web. Trato de explicarlo:

Para que una SPA (Single Page Application, Aplicación de una sola página) pueda refrescarse de ese modo lo que hay que hacer es deshabilitar la respuesta 404 de tu servidor.

Supongamos que:

  1. Tu aplicación web carga todo (y por tanto tiene su raíz en http://localhost/).

  2. El usuario navega, pasando de la raíz (/) a otra página (/ApiHistory). Realmente no se ha hecho una petición al servidor, sino que tu aplicación cambia la URL del navegador.

  3. El usuario refresca la aplicación o (un escenario habitual) va directamente a esta dirección porque la tiene en sus Favoritos.

  4. El servidor recibe la petición y no encuentra esa página.

Estamos en el punto interesante: el servidor puede...

  • Responder con un HTTP status 404: El navegador mostrará una página de error con un mensaje, que puede ser la respuesta del navegador o una página propia (suele depender del tamaño de la respuesta).
  • Redirigir a otra página: Es muy típico tener una página que muestre el 404 de un modo más bonito y personalizado, como hace por ejemplo StackOverflow.

Ahora bien, si la página de error la defines como la página inicial de tu aplicación (/), ¿qué ocurre? Pues que tu página se carga con la URL http://localhost/ApiHistory. Una vez que tu aplicación se ha inicializado no tiene más que mirar la URL y mostrar la página correspondiente.

Es por esto que los frameworks como React o Angular suelen usar un router que se encarga de gestionar, como una máquina de estados, qué URL es la actual y qué se tiene que mostrar en esa URL.

Por tanto, si usas Apache, o Nginx o cualquier otro servidor web, tendrás que mirar la documentación correspondiente y configurar la gestión del error 404 para que se adecue a lo que necesitas.

En Nginx sería añadir a la configuración algo como

try_files $uri $uri/ /index.html;

En Apache sería (creo) añadir algo como

ErrorDocument 404 /ApiHistory/

en tu fichero .htaccess

18
  • estaba probando lo de .htaccess de forma local. Donde puse: ErrorDocument 404 /GloMovil/ApiHistory/ ahora no me muestra el mensaje de "Objeto no localizado" pero tampoco me muestra el contenido que está en la URL http://localhost:81/ApiHistory/Computadora. Utilizando el navegador Chrome para ver los eventos en JavaScript, pasa lo mismo, nunca entra al $(document).ready(function (){//} es más ni siquiera se ve el index.php desde el Network que proporciona la consola del Chrome (por eso nunca entra). ¿se puede probar esto localmente? Commented el 13 jun. 2018 a las 15:07
  • Ahora mi página de inicio está en ApiHistory y estoy haciendo en .htaccess ErrorDocument 404 /ApiHistory/ pero no entra nunca al index.php cuando se refresca la página. También he probado con ErrorDocument 404 /index.php pero la URL se me va a http://localhost:81/dashboard/ o sea mucho más atrás. En definitiva, mi URL que quiero refrescar es http://localhost:81/ApiHistory/Computadora para luego poder ir a buscar el contenido que trae el término "Computadora". ¿Quizás no se pueda hacer localmente? Commented el 13 jun. 2018 a las 16:13
  • No me resultó, fue lo mismo que cuando puse /ApiHistory/. Lo que si está funcionando es que si voy para atrás o para adelante en el navegador el contenido lo pone, por más que antes al refrescar no lo muestre. Por ejemplo, hago una búsqueda y la URL queda http://localhost:81/ApiHistory/RAM luego pongo "Computadora" y queda http://localhost:81/ApiHistory/Computadora después refresco la página (no me muestra nada), pero si voy para atrás me muestra el contenido de "RAM" y si hago para adelante el de "Computadora". Commented el 13 jun. 2018 a las 20:10
  • Bueno al final lo pude solucionar. La línea en el archivo .htaccess quedo así ErrorDocument 404 /ApiHistory/ y era un tema de ubicación del código de JavaScript, lo puse al principio y funciona al refrescar la página, al menos de forma local. No sé que pasará cuando lo suba. Otra duda, todo esto anda bien si trabajo siempre en la misma página, pero que pasa si la URL viene de afuera (o sea de otro sitio, buscadores, etc.), ¿debería funcionar? Commented el 14 jun. 2018 a las 15:06
  • Tu servidor sólo recibirá una petición HTTP GET <url> desde un cliente (normalmente un navegador), da igual si esa URL la escribieron en la barra de direcciones o si estaba en un link en otra página. Edito la respuesta ahora que sabemos exactamente cómo funciona :) Commented el 14 jun. 2018 a las 15:48
1

Para darle un cierre a este hilo, al final encontré la solución cuando se refresca la página. Tuve que agregar las siguientes líneas al archivo .htaccess de Apache:
ErrorDocument 404 /index.php RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.php [NC,L]

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.