Javascript et historique navigateur, history.pushstate

[toluol]

Bonsoir,

je développe de plus en plus de sites avec des parties en ajax, mais je ne parviens toujours pas à utiliser la méthode pushstate pour conserver un historique dans le navigateur.
Le principe que j'utilise est très basique : un lien <a> est ciblé en jquery et celui-ci utilise de l'ajax pour me retourner l'html qui va me permettre de modifier ma partie de page. J'ai donc un "return false;" dans ma fonction pour bloquer l'action naturelle du lien par le navigateur. Mais ce lien existe bien évidemment, et c'est que je souhaite "stocker" avec le pushstate.

Pour l'instant, cela "stocke" bien mes urls, et quand je clique sur les boutons "back" et "forward" du navigateur, l'url change (et le title aussi, si je veux), mais il n'y a pas un rechargement de la page au clic de ces boutons ! Et ce, quelque soit le navigateur. Pourriez-vous m'éclairer sur ce problème ?

voici le code de mon bouton "épuré"...

Code

     $('a#test').click(function(){

                    var vars = $(this).attr('variables');

                    $.ajax({
                    type: 'POST',
                    url: 'update.php',
                    data: "vars="+ variables,
                    dataType:'text',
                    success: function(data){
                        var tabData = data.split(";;");
                        var html = tabData[0];
                        var title = tabData[1];
                        var url = tabData[2];
                        
                        document.title = title_nav;
                        window.history.pushState(null,title_nav, url_nav);                    
                    },    
                    error: function() {alert('erreur serveur');}
                    });

                return false;
     });

[toluol]

Eh ben, je bloque toujours... J'ai beau chercher, mais toujours aucune piste.

[yponomeute]

Hello,

J'ai pas encore mis ça en oeuvre pour l'instant, mais d'après ce que j'ai compris il faut utiliser onpostate pour détecter le clic sur un bouton précédent ou suivant du navigateur et ensuite déclencher la mise à jour de la page : https://developer.mozilla.org/fr/docs/DOM/window.onpopstate

[marc_os]

Je n'ai pas bien compris ton problème, en particulier le rapport entre le code JS de ton lien a#test et les boutons Précédent et Suivant du navigateur.

Ceci dit, il est normal que les navigateurs ne rechargent pas une page affichée via les boutons Précédent et Suivant car ils la récupèrent depuis le cache du navigateur. Donc, si tu veux que la page soit rechargée, une solution pourrait être d'empêcher le navigateur de mettre les pages en question en cache, par exemple grâce aux appels suivants au début du code php qui génère la page :

Code

header("Cache-Control: no-cache");
header("Pragma: no-cache");

A tester…

Autre remarque : Si ton lien a#test se trouve sur un élément réagissant aux clics via par exemple :

Code

$('div#testConteneur').click(function(){
     /* ... */
});

alors ce code sera exécuté aussi. Pour éviter cela, ajouter event.stopPropagation(); au début de ton code :

Code

$('a#test').click(function(event){ // ne pas oublier de mettre 'event' en paramètre
    event.stopPropagation();

    var vars = $(this).attr('variables');
    /* ... */
});

[toluol]

Désolé à yponomeute et marc_os pour ma lente réponse. J'ai eu un problème de notification de réponse.

En fait, je crois justement que mon problème vient justement du fait que rien n'est mis en cache...

Pour résumer :
Avant que j'essaie de mettre en place un historique
1. Je suis sur google (historique 1)
2. Je charge ma page où il y a mon site. (historique 2)
3. Je clique sur mon bouton (ou mon div) qui appelle une fonction ajax qui modifie une partie de ma page...
Cela n'est pas mis en cache (...enfin... il me semble) par le navigateur. (état 3, mais non enregistré)
4. Si je clique sur le bouton "revenir en arrière" du navigateur, de l'état 3 de la page, je retourne à l'historique 1...
car il n'a pas enregistré l'historique 3 (un état de la page modifié par javascript)

En utilisant pushState, j'espérais...
1. être sur google (historique 1)
2. charger ma page où il y a mon site. (historique 2)
3. cliquer sur mon bouton (ou div) qui appelle une fonction ajax qui modifie une partie de ma page... (état 3, pushstate enregistre "pageA.html")
4. cliquer sur un 2e bouton (ou div) qui appelle une fois encore ma fonction ajax... (état 4, pushstate enregistre "pageB.html")
5. Si je clique sur le bouton "revenir en arrière" du navigateur, de l'état 4 (mis en forme par javascript et étant la même page que pageB.html), je pensais lancer pageA.html

Hélas... si mon code enregistre pageA.html et pageB.html dans l'historique, le seul clic ne suffit pas à "revenir à l'état précédent"... (Je dois relancer la page)

Et c'est la que je suis perdu car je ne comprends pas la méthode ! A quoi sert la méthode pushState si ce n'est pour enregistrer des urls "en dur" qu'on peut relancer ?
Permet-elle d'enregistrer dans le cache la page modifiée ?

[No6]

Ya un truc qui me chiffonne dans ton code:
pour moi, le fait d'avoir un return false; sur le click du lien le rend inopérant non ???

[toluol]

C'est le but... Sinon ma page se rechargerait et je ne pourrais pas faire tout ce que je veux en javascript.
Le code que j'ai montré est un code simplifié, mais il y a des animations qui ne se feraient pas si c'était un lien normal.
Ce serait plus simple de vous montrer le site, mais je ne veux pas faire de pub. Je peux éventuellement le transmettre par MP.

[yponomeute]

D'après ce que j'ai lu sur le sujet, j'ai compris qu'il faut détecter la navigation arrière dans l'historique (bouton précédent) avec window.onpopstate, et ensuite executer l'appel ajax qui correspond. Le navigateur ne relançant pas de lui même les appels ajax. Mais ça reste du domaine de la théorie pour moi, j'essayerai de faire des tests quand mon planning pro sera un peu moins touffu.

[toluol]

Ok, merci pour cette piste qui me semble prometteuse... Je vais aussi essayer de faire des tests