Foros Programación Cliente
Problema con AJAX degradable
22 22 Respuestas Lunes 3 de noviembre, 2008
Muy buenas,
Estoy haciendo una web cuya navegación funciona a base de AJAX. Es decir, en lugar de recargar la página carga el contenido en un div.
Ahora bien, la gracia de esto es que sea degradable. Si alguien no tiene JS... deberia ser capaz de ver lo mismo pero recargando la página, a la antigua usanza.
[Ir directamente al punto 2) para ver el problema]
Estoy haciendo esto de la siguiente forma:
- Los links apuntan a la direccion PHP/loquesea del servidor (?seccion1). Si quien navega la web no tiene JS todo funciona bien.
- JS reemplaza los links tipo ?seccion1 por links tipo #seccion1. Quien tenga JS vera la web d pm.
- Para el problema de los botones adelante/atras uso el plugin jquery history asi q arreglado.
Ahora bien, problemas:
1) Q pasa si alguien accede a traves de un enlace directo a ?seccion1. En lugar de mostrar ?seccion1#seccion2 quiero que se muestre #seccion2. Bien, esto lo puedo arreglar redirigiendo por JS todo lo que venga ?enesteformato a #esteotro.
2) Q pasa si alguien sin JS accede directamente a #seccion1 ????
Aqui si que no veo solucion ya que no hay manera de detectar el hash(#) en servidor, almenos con php y/o mod_rewrite.
Ideas???
Estoy haciendo una web cuya navegación funciona a base de AJAX. Es decir, en lugar de recargar la página carga el contenido en un div.
Ahora bien, la gracia de esto es que sea degradable. Si alguien no tiene JS... deberia ser capaz de ver lo mismo pero recargando la página, a la antigua usanza.
[Ir directamente al punto 2) para ver el problema]
Estoy haciendo esto de la siguiente forma:
- Los links apuntan a la direccion PHP/loquesea del servidor (?seccion1). Si quien navega la web no tiene JS todo funciona bien.
- JS reemplaza los links tipo ?seccion1 por links tipo #seccion1. Quien tenga JS vera la web d pm.
- Para el problema de los botones adelante/atras uso el plugin jquery history asi q arreglado.
Ahora bien, problemas:
1) Q pasa si alguien accede a traves de un enlace directo a ?seccion1. En lugar de mostrar ?seccion1#seccion2 quiero que se muestre #seccion2. Bien, esto lo puedo arreglar redirigiendo por JS todo lo que venga ?enesteformato a #esteotro.
2) Q pasa si alguien sin JS accede directamente a #seccion1 ????
Aqui si que no veo solucion ya que no hay manera de detectar el hash(#) en servidor, almenos con php y/o mod_rewrite.
Ideas???
-
cbp
Registrado desde 18/11/03 / Número de posts: 4007
¿por qué cambias los enlaces de "?seccion1" a "#seccion1"? -
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Para evitar una URLs como www.loquesea.com/seccion1/#seccion2/ -
cbp
Registrado desde 18/11/03 / Número de posts: 4007
perdona si no lo entiendo bien ¿pero por qué tendrías una URL de ese tipo? ¿por qué no las dejas tal cual, sin sobreescribir con JavaScript?
-
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Si las dejo sin sobreescribir con javascript la web se recarga. A menos q no use ningun parametro y solo haga el ajax, en cuyo caso no se podrian hacer links directos.
-
cbp
Registrado desde 18/11/03 / Número de posts: 4007
no hace falta sobreescribir nada, basta con que en el onclick de JavaScript pongas un "return false". si el usuario tiene JavaScript se ejecutará el onclick y se detendrá, si no se ejecutará el HREF ¿eso te serviría?
-
MrSoriano
Registrado desde 28/06/07 / Número de posts: 1155
¿Y porqué no pones un prevent default para que al hacer click en cualquier enlace a #loquesea no se cargue la página y se ejecute tu función?
Mira, en jquery sería tal que así:$("#menu a").click(function(e) {
e.preventDefault();
});
Y luego ya le pones todo lo que quieras que haga -
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Eslo que hago.
Todos los links son del tipo ?loquesea para que si el usuario no tiene javascript o lo visita google todo chute.
Cuando alguien clicka hago un prevent default y uso URL del tipo #loquesea para poder hacer adelante y atras en el navegador.
El tema es q pasa si alguien entra con una URL #asi sin JS. Si tienen JS funciona bien xo si no lo tienen creo q no hay forma de pillar el # almenos en PHP o mod_rewrite.
Espero que ahora quede todo mas claro :) -
cbp
Registrado desde 18/11/03 / Número de posts: 4007
insisto, no veo el motivo para tener una dirección "?seccion1? para usuarios sin JS y otra "#seccion1" para los que sí lo tengan. con una del tipo "?seccion1" y un buen JS no hace falta distinguir entre ambas
-
MrSoriano
Registrado desde 28/06/07 / Número de posts: 1155
Ponnos un link anda, que me quedo con las ganas de ver el código.
-
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Mmm... enga ahi va...
http://ozke.com/misc/dmstk/SWFInPage/
Reproduce una cancion continuamente. Ya se q podria haberme currado un boton de pause pero ando pero bueno, solo es xa testear. -
MrSoriano
Registrado desde 28/06/07 / Número de posts: 1155
Vaya, pues es casualidad que yo esté con un proyecto que hace lo mismo!!
Mira, te dejo el link:
LINK
La página mostrador-ajax.php es la que va realizando las consultas a la base de datos. Funciona el historial, y además funciona sin JS.
Aún tengo que currarme lo de la carga (animaciones de fadein fadeout y tal), pero bueno, es una maqueta para ir probando.
Mira a ver si te sirve y si eso te paso los archivos. -
HARTUM
Registrado desde 22/11/02 / Número de posts: 4293
Holaaaaaa nas nochesssssssss
pues yo lo hago de la siguiente manera:
me preparo mis paginas seccion1.php, seccion2.php, seccion1.php, etc... en todas ellas lo primero que hago es recoger una variable que se llame por ejemplo $ajax_active, si ajax active:
muestra solo el contenido
si !$ajax_active:
include cabecera.php;
include menu.php;
//---aqui el contenido ------
include pie.php;
y en todas las llamadas Ajax le paso la variable ajax_active=true.
Esdecir, si no le paso nada, por defecto cargo todas las partes de la pagina, pero si le paso la variable solo cargo el contenido.
Me he explicao'??
Ejem: http://www.coated.org/web/nosotros.php -
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Hartum, en tu site, si clicko en nosotros y luego voy a ambiente la URL no refleja la situacion actual. Por ello uso # para mostrar siempre la URL actual.
Mambru.... tu me ensenyas un ejemplo de algo q no es AJAX. :? -
HARTUM
Registrado desde 22/11/02 / Número de posts: 4293
Momento WTF??? que yo no lo haga no significa que tu no lo puedas hacer, de todas formas y ya que haces el comentario ¿para que quieres cambiar la URL? si es por los robots de google, no leen javascript, es mucho mas descriptiva para la indexaccion como lo hago yo, si es por el usuario, con reemplazar los enlaces con una llamada Ajax y el #seccion como lo haces tu, sería suficiente.
Vamos que mi solución no excluye tus requisitos. :-D -
MrSoriano
Registrado desde 28/06/07 / Número de posts: 1155
No no, lo mio si que utiliza AJAX, lo que pasa que lo que carga es contenido que sale tras una llamada a la base de datos, nada más.
Por cierto... ¿me podrías echar una mano con el mod_rewrite? Es que estoy intentando apañarlo para enbellecer las URL's pero no lo consigo. Y mira que estoy mirando tutoriales, pero nada. -
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Mambru, aqui va una URL sencillita:
http://www.peoplecnc.com/ayuda_mod_rewrite.html
Por cierto, tu solucion es resultona pero no me sirve ya que recargas la pag con lo cual si tienes un elemento SWF tb se recargara.
Hartum, siento el malentendido. Por supuesto una cosa no excluye la otra. En mi caso que la URL refleje el contenido actual es un requisito de proyecto. Por ejemplo, lo que veo en la pag X me gusta.... pues puedo enviarlo por email. Es muy chorra pero es lo que hay. :S
Gracias a ambos.
Por cierto, volviendo al tema.... alguna forma de detectar un hash desde php o mod_rewrite. He seguido buscando y me temo q sencillamente no se puede. Putadon :S -
ozke
Registrado desde 10/05/02 / Número de posts: 1473
Hombre Sergi que alegria verte por aqui con la barretina :)
Eso es lo primero que prové pero no me pilló el hash.
Es decir, si lo intentas con un string que contiene el hash perfecto. El problema es que el hash no llega al servidor.
:)
Áreas Domestika
- Diseño (gráfico, web, industrial, producto)
- Programación (cliente, servidor, accesibilidad)
- Ilustración (autores, inspiración, técnicas)
- Fotografía (técnica, equipo, autores)
- Motion Graphics (showreels, software, estudios)
- Publicidad (campañas, anuncios, ideas)
- Informática (software, hardware, trucos)
- 3D (técnicas, iluminación, modelado)
- Experiencia de Usuario (usabilidad, AI, HCI)
- Cine, vídeo y televisión (críticas, producción)
- Música y Audio (sonidos, loops, discos)
- Espacios (arquitectura, interiorismo)