Gestion de l'historique sur première page chargée en PHP
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. :triste:
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:
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:
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
}
}
} |
