Gestion des retours avant / arrière via le navigateur avec AJAX

Bonjour,

Je dispose d'une application Web composée de deux pages.

• La première sert à se connecter
• la seconde permet l'affichage des données AJAX

Le problème est que l'utilisateur est souvent tenté d'utiliser le bouton retour arrière de son navigateur pour recharger les données AJAX. Par exemple lorsqu'il navigue dans une sous catégorie, il clique sur retour arrière pour retrouver l'ensemble des catégories. Le problème vient alors du fait qu'en procédant ainsi il se retrouve sur la page de connexion.
Existe-t-il un moyen d'éviter ce comportement, essentiellement dû au navigateur ?

Merci :)

Le blog.clever-age.com donne quelques conseils pratiques
De même qu'ici : une clarification sur l'ergonomie d'un site reposant pour partie sur AJAX

Sauf que parfois les clients sont têtus :/ Je continue donc à chercher une solution.

Citation:

---

Envoyé par Orang-

Le blog.clever-age.com donne quelques conseils pratiques

---

cela permet d'éviter ton problème, est ce que tu as essayé ?

Pour être franc je me suis un peu perdu dans les explications et la lisibilité du code proposé. Mais ok je vais voir ça plus attentivement.
Merci :)

Bonjour,

en réalité, tu n'as besoin que d'UNE SEULE page :
Dans cette unique page :

• Si pas connecté : afficher le formulaire de connexion
• Si connecté : afficher le site

Une variable de SESSION peut suffire.

Merci :) Effectivement c'est sans doute le plus simple.
Edit : 05/10/15 Malgré cela je préfère conserver une page d'accueil distincte de la seconde permettant l'affichage des données AJAX.
@mathieu la page fait référence au plugin history. Celui-ci n'est plus maintenu depuis le 25 février 2012 !
Je continue à chercher. Si je trouve une solution simple et fonctionnelle, je viendrai l'ajouter ici.

Salut,

Alors t'as avancé ?

Il y a plusieurs cas de figure.

1/ Si tu veux utiliser la navigation avant/arrière du navigateur avec ajax
a/ créer ou modifier le hash de l'url en javascript avec document.location.hash à chaque retour de requête ajax
Cela permet de créer des entrées dans l'historique du navigateur.
b/ créer une écoute pour observer un changement d'url du navigateur (tu peux utiliser "hashchange" ou "popstate") et, en différenciant que ce changement ne provient pas d'un click sur la navigation spécifique ajax, recharger en ajax la vue correspondante au hash.
Là on a rendu les boutons du navigateur plus conviviaux puisqu'ils suivent la navigation ajax.

2/ Si tu souhaites simplement faire en sorte que le bouton retour arrière du navigateur ne revienne pas à la page précédente mais reste sur la même page en faisant une action quelconque tu peux ajouter une entrée nommée dans l'historique avec "history.pushState" quand tu déclenche la navigation ajax. Ensuite avec "popstate" ou ""hashchange"" tu contrôle le changement d'historique et agit en conséquence.

La doc est ici sans oublier les liens bas de page.

J'ai utilisé ces deux procédés sur ce petit site pour les diaporamas de présentation.

1/ Si tu utilises les boutons de navigation en bas des blocs d'images, cela affiche les pages suivantes du diaporama en ajax. Mais tu pourras utiliser les boutons du navigateur pour revenir en arrière et voir les blocs précédemment affichés.

2/ Si ensuite tu clique sur une image, la diapo-box s'affiche pour afficher les images en grand. Cette fois-ci j'ai gardé une url fixe et l'on navigue comme convenu avec les boutons ajax du bas de page mais si l'on clique sur le bouton arrière du navigateur, cela ferme simplement la diapo-box et on se retrouve sur la même page (celle depuis laquelle on vient d'obtenir la box). J'ai simplement ajouté une entrée mémoire dans l'historique du navigateur, de sorte quand je fais history.back() je reste sur la même page ;)

@ABCIWEB : J'avais un peu avancé, mais en bricolant des liens pas terribles et en mélangeant du code PHP et JS. Du coup, je me suis inspiré de l'outil que tu as développé. Je le trouve très fluide et agréable à utiliser (je remarque juste peut être de l'absence d'une croix de fermeture lorsque l'image s'affiche en grand). D'autant que Je ne connaissais pas du tout les éléments que tu évoques.

Merci !

Citation:

---

Envoyé par Orang-

Je le trouve très fluide et agréable à utiliser (je remarque juste peut être de l'absence d'une croix de fermeture lorsque l'image s'affiche en grand)
Merci !

---

Oui j'ai pas voulu implémenter un bouton inutile.

On peut fermer la box d'agrandissement en cliquant sur l'image, c'est un comportement très courant.

Et c'est justement pour les nouveaux utilisateurs qui n'auraient pas ce réflexe que j'ai modifié le comportement du bouton du navigateur, cf point numéro /2 évoqué dans mon précédent message :

- Si on ne sait pas quoi faire pour fermer la box et qu'on a pas le réflexe de cliquer sur l'image, on a tendance à essayer le bouton retour arrière du navigateur, ce qui fonctionne comme prévu et nous ramène sur la page du diaporama d'où provient le click qui a déclenché l'agrandissement.

Si je n'avais pas ajouté une entrée dans l'historique du navigateur quand on déclenche la box d'agrandissement, le bouton retour arrière du navigateur aurait affiché la page précédente de son historique. Alors qu'au final on reste sur la même page et je m'en sert juste pour fermer la box d'agrandissement ;)

Justement c'est en ce sens que je trouve l'application très fluide. Cette possibilité de gérer finement l'historique est bien pratique.