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?