[AJAX] Ajax adresse de la page

Bonjour,

Ma question va peut être vous paraitre étrange, mais bon, je me lance.

AJAX permet justement d'appeler une page sans rafraichir la page. Le problème, c'est qu'une fois qu'on a fait cela, l'adresse notée en haut du navigateur est toujours celle de la page de "base" donc, un petit F5 et on repart au début. De plus, si le visiteur souhaite envoyer une page précise a quelqu'un en copiant/collant l'adresse, y a bien des chances pour que les 2 ou 3 transformation ajax ne soient plus présents.

Je vais prendre un exemple concret.

Si j'ai une galerie photo sur la page magalerie.php et que je permet au visiteur de faire défiler mes photos en AJAX.

Dès qu'il va se trouver sur une photo qu'il souhaite montrer a quelqu'un, il va copier l'adresse du haut, mais ça sera toujours magalerie.php, du coup retour a la case départ.

Existe t-il une solution pour contrer ce problème ? Par exemple, réécrire l'adresse du haut (magalerie.php?id=1, id=2, id=xxx)

Merci de votre aide

Bonjour,

La technique pour ce genre de problématique est d'utiliser les ancres. Admettons que tu développes un site où toute la navigation se fait via ajax (ce qui te permet de ne rafraichir que le contenu, pas le menu, ni le footer...).
Le plus simple est à chaque fois que l'utilisateur clique sur un lien entrainant de la navigation, de changer le hash de sa page (document.location.hash) par exemple avec le contenu du href. Tu n'as plus alors qu'à observer régulièrement l'url pour détecter un changement de hash et réaliser ton traitement ajax. Le problème du copier coller d'url est de fait résolu (pourvu que le destinataire est bien javascript activé). Un autre avantage est que les boutons next/previous du navigateur permettent effctivement de naviguer dans l'historique AJAX.

Une petite recherche de "navigation ajax" sur google devrait te donner des idées.
Si tu utilises jQuery, le plugin history te sera d'une grande aide pour les navigateurs obsolètes (devinez de qui je parle :roll:).

Hello,

Merci pour ton aide.

J'ai lu plusieurs articles / tutos sur la navigation en AJAX a l'aide des ancres.

C'est très intéressant, mon souci c'est que j'ai trouvé plusieurs méthodes différentes plus ou moins compliquée.

Étant débutant en JS, j'aimerai partir sur une bonne solution tout de suite et éviter de me perdre dans des solutions bricolage annexe.

Pourrais-tu m'expliquer en peu plus en détail (ou m'orienter vers un tuto) une bonne méthode ?

Merci encore

BigZ

Citation:

---

Envoyé par BigZ444

C'est très intéressant, mon souci c'est que j'ai trouvé plusieurs méthodes différentes plus ou moins compliquée.

---

Différentes en quel sens ? Elles se basent toutes sur l'observation du hash dans l'URL non ?
Après concernant leur difficulté, tout dépend de la compatibilité de navigateurs... Si tu dois être compatible IE6+, tu vas effectivement devoir contourner des lacunes du navigateur par une iframe... mais pour celà, inutile de réinventer la roue, jette un oeil aux démos jquery du plugin history, ca te donnera de bonnes idées, et le code des démos est très simple.

Je suis désolé, mais je n'y arrive définitivement pas.

Voilà en gros comment marche ma galerie photo.

Un fonction JS qui recoit en paramètre l'id de ma galerie + l'id de ma photo, et qui ensuite appelle un script php (photo.php) qui va générer l'affichage

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function photo(id_gal, id){ if (id_gal > 0) { $.post('photo.php', { id_gal:id_gal, id:id }, function(data){ $('#photo').fadeOut('slow', function() { $("#photo").html(data); }); $('#photo').fadeIn('slow', function() {}); } ); } }

---

Ensuite dans mon script photo.php je génère aussi des flèches de navigation comme cela :

Code:

---

<a href="javascript:;" onClick="photo('.$id_galerie.','.$suiv.');"><img src="images/droite.gif" border="0" alt="Photo suivante" /></a>

---

Quelqu'un peu m'aider ?

Merci