Discussion :

[memento80]

Bonjour,

J'ai surement un petit problème de conception à propos de la gestion de l'historique de navigation en Ajax + PHP. C'est peut-être tout bête mais je commence à tourner en rond après avoir épluché le web.

Je m'essaye depuis peu à la navigation de page en page avec Ajax et une gestion de l'historique avec pushState après chargement de chaque page.
Lorsque je fais des retours arrière dans la navigation, mes pages historisées réapparaissent bien grâce à la gestion du window.onpopstate. Jusque là, pas de problème...
Par contre, le problème apparaît quand j'arrive sur la première page chargée dans l'historique, celle-ci ne provoque pas un rafraîchissement de la page. A première vue, cela semble logique car la première page en question a été chargée de "façon classique", en php et lors du retour arrière sur cette page, le event.state constaté est à null.

Pour schématiser la navigation réalisée :
- Page 1 [Chargement PHP]
- Page 2 [Chargement AJAX + pushState]
- Page 3 [Chargement AJAX + pushState]
- Retour arrière sur page 2 [Chargement grâce gestion window.onpopstate et son event.state]
- Retour arrière sur page 1 [Pas de rechargement de la page 1 car event.state à null]

Ma question est donc, que devrais-je faire pour provoquer ce chargement de la page 1 par retour arrière au niveau de l'historique ?

Merci par avance pour vos pistes.
Memento

Quelques extraits.. si utile :

Commande pushState après chargement AJAX

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
window.history.pushState(
                {typaff:'GETINFAJAX', page:prd, compprd:compPrd, idcible:idCible, fgshow:fgshow, comp:tabParamAff,
                    blocaff:tabBlocAff, blocMas:tabBlocMas, zoneAct:tabLigAct, zoneDes:tabLigDes},
                document.title,
                "/index.php?page="+prd.toUpperCase()+varCompUrl); // Modification de l'URL (+historique)

Extrait partie window.onpopstate (fctGetInfoAjax met à jour les informations en Ajax)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onpopstate = function(event) { // Navigation dans l'historique
        console.log(event);
        if(event.state != null) { // Si état particulier mentionné
            //alert('pas null : '+event.state.toSource());
            if(event.state.typaff == 'GETINFAJAX') { // Si récupération d'information par Ajax (pour alimenter un bloc)
                var prd = event.state.page;
                var compPrd = event.state.compprd;
                var idCible = event.state.idcible;
                var fgshow = event.state.fgshow;
                var tabParamAff = event.state.comp;
                var tabBlocAff = event.state.blocaff;
                var tabBlocMas = event.state.blocMas;
                var tabLigAct = event.state.zoneAct;
                var tabLigDes = event.state.zoneDes;
 
                fctGetInfoAjax({'Prd':prd, 'CompPrd':compPrd, 'IdCible':idCible, 'FgShow':fgshow, 'TabParamAff':tabParamAff,
                    'BlocAff':tabBlocAff, 'BlocMas':tabBlocMas, 'LigAct':tabLigAct, 'LigDes':tabLigDes}, 0, null); // Affichage du contenu en Ajax
            }
        }
    }

[NoSmoking]

Bonjour,

Retour arrière sur page 1 [Pas de rechargement de la page 1 car event.state à null]

traite donc ce cas à part, fait un rechargement forcé ou recharge la partie Ajax.

[memento80]

Merci pour ta réponse.

Traiter ce cas à part est donc la meilleure solution ?
Comment le traiter à part ? Utiliser replaceState lors du premier chargement de cette page 1 pour détecter ce cas lors du futur retour arrière (et donc du window.onpopstate) ? Une autre manière ?