AJAX et bouton précédent du navigateur

Version imprimable

09/11/2020, 10h05
M0h4m37

AJAX et bouton précédent du navigateur

Bonjour à tous,

Je crée un site dans lequel chaque page possède uniquement un texte et 2 ou 3 boutons (précédent, suivant...) qui redirigent vers une autre page. Le site est totalement en ajax, la page ne se recharge jamais, seulement son contenu.

J'utilise window.history.pushState("object or string", title_history, url_history) pour modifier l'URL de la page et ça fonctionne sans problème.

Si je suis sur index?id=1 et que je clique sur le bouton "suivant", le contenu de la page se charge et l'URL change et devient index?id=2 et ainsi de suite donc tout va bien.

Mon problème est que si je suis la page index?id=2 et que je clique sur le bouton "Précédent" du navigateur, l'URL change et devient bien index?id=1 mais le contenu ne se recharge pas et reste celui de index?id=2

Est-ce que quelqu'un aurait une piste à me donner s'il-vous-plaît... J'ai fait des recherches sur Google mais je ne dois pas taper le bon mots-clés...

Merci d'avance.
09/11/2020, 14h37
Toufik83

Bonjour,

Il va falloir montrer le code de la partie en question pour pouvoir t'aider.

Bonjour,

Désolé, j'ai pas mis de code parce que je n'ai pas vraiment d'erreur. Et que tout fonctionne à part le rechargement de la page, je vois pas trop ce que je pourrais mettre à part ceci :
Code:

1 2 3 4 5 var url_history = 'aventure.php?id='+recup.id_history+'&ida='+recup.id_primero; // URL A AFFICHER DANS LE NAVIGATEUR var title_history = recup.histoire+' | '+recup.id_primero; // L'INFORMATION QUI S'AFFICHERA DANS LA BALISE TITLE window.history.pushState("object or string", title_history, url_history);
A la base, je voulais que l'URL change à chaque clic et ça fonctionne grâce window.history.pushState Mais, le chargement des données ne fonctionne que grâce à mes boutons. Les boutons précédent et suivant du navigateur ne modifient que l'URL mais pas le contenu de la page.

Voilà, merci.

09/11/2020, 22h40
Toufik83

Bonjour,

Oui mais tu disais que le site est totalement chargé en ajax, donc il faut montrer le code d'AJAX pour voir les variables utilisées et comprendre ce qui se passe...

Désolé, j'étais tellement convaincu que ça venait pas de mon code... j'avais pas compris ça, alors ça se joue sur 2 pages : le code de la page principale avec la fonction ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<script>
   $(document).ready(function(){
        $('.choix').click(function(){
            var choice=$(this).attr("rel");
            var id_primero=$(this).data("ajax");
            var id_history=$(this).data("history");
            var histoire=$(this).data("histoire");
            var perso=$(this).data("perso");
            $('#load').show();
            $('#all_choice').hide();
            $.ajax({
                type: 'post',
                url: 'suite.php',
                dataType: 'json',
                data: { id:choice, id_primero:id_primero, id_history:id_history, histoire:histoire, perso:perso },
                success: function(recup)
                {
                    $('#load').hide();
                    $('#all_choice').show();
 
                    $("body").animate({opacity: 0}, 1).delay(500).css({
                       'background-color' : 'rgba(0, 0, 0)',
                       'background' : 'radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(<?=$url_site?>/wallpaper/'+recup.image+'.jpg) no-repeat center fixed',
                       '-webkit-background-size' : 'cover',
                       'background-size' : 'cover',
                       '-webkit-animation-name': 'example',
                       '-webkit-animation-duration': '4s',
                       'animation-name': 'fondu',
                       'animation-duration': '4s'
                    }).animate({opacity: 1}, 1000);
 
                    $('.text').html(recup.text).scrollTop(0);
                    $('.choix1').text(recup.choix1);
                    $(".choix1").attr('rel', recup.id_choix1);
                    $(".choix1").attr('data-ajax', recup.id_primero);
                    $(".choix1").attr('data-history', recup.id_history);
 
                    if(recup.id_choix0>0) { $('.choix0').show(); $('.choix0').text(recup.choix0); $(".choix0").attr('rel', recup.id_choix0); $(".choix0").attr('data-ajax', recup.id_primero); $(".choix0").attr('data-history', recup.id_history); }
                    else { $('.choix0').hide(); }
                    if(recup.choix2!="") { $('.choix2').show(); $('.choix2').text(recup.choix2); $(".choix2").attr('rel', recup.id_choix2); $(".choix2").attr('data-ajax', recup.id_primero); $(".choix2").attr('data-history', recup.id_history); }
                    else { $('.choix2').hide(); }
                    if(recup.choix3!="") { $('.choix3').show(); $('.choix3').text(recup.choix3); $(".choix3").attr('rel', recup.id_choix3); $(".choix3").attr('data-ajax', recup.id_primero); $(".choix3").attr('data-history', recup.id_history); }
                    else { $('.choix3').hide(); }
                    if(recup.choix4!="") { $('.choix4').show(); $('.choix4').text(recup.choix4); $(".choix4").attr('rel', recup.id_choix4); $(".choix4").attr('data-ajax', recup.id_primero); $(".choix4").attr('data-history', recup.id_history); }
                    else { $('.choix4').hide(); }
 
                    $(".lien_retour").attr('href', 'index.php?id='+recup.id_history+'&ida='+recup.id_primero);
 
                    if(recup.musique!=recup.session)
                    {
                        $("#ambiance_sonore").animate({volume: 0}, 2000);
                        $("#ambiance_sonore, #zik").queue(function(next) { $(this).attr('src', 'musique/'+recup.musique+'.ogg'); next(); });
                        $("#ambiance_sonore, #zik2").queue(function(next) { $(this).attr('src', 'musique/'+recup.musique+'.mp3'); next(); });
                        var audioElement = document.getElementById("ambiance_sonore");
                        $("#ambiance_sonore").animate({volume: aud.volume}, 2000);
                        audioElement.play();
                    }
                    $('#load').hide();
 
                    var url_history = 'aventure.php?id='+recup.id_history+'&ida='+recup.id_primero;
                    var title_history = recup.histoire+' | '+recup.id_primero;
 
                    window.history.pushState("object or string", title_history, url_history);
                    $(document).attr("title", recup.histoire+' | '+recup.id_primero);
                    $('meta[name=description]').attr('content', recup.description);
 
                    $('meta[name=fb_url]').attr('content', '<?=$url_site?>/'+url_history);
                    $('meta[name=fb_title]').attr('content', recup.histoire+' | '+recup.id_primero);
                    $('meta[name=fb_desc]').attr('content', recup.description);
 
                    $('meta[id=tweet_title]').attr('content', recup.histoire+' | '+recup.id_primero);
                    $('meta[id=tweet_desc]').attr('content', recup.description);
                    if($('.text').has_scrollbar()) { $('#bas').show(); } else { $('#bas').hide(); }
                }
            });
        });
    });
</script>

Et le code du fichier appelé : suite.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?php
    include("include.php"); // Connexion à la BDD
    $mysqli->query("SET NAMES UTF8");
    $select = 'SELECT * FROM `'.$table_histoire.'` WHERE id='.$_POST["id"].' AND history='.$_POST["id_history"];
    $result = $mysqli->query ($select);
    $row = $result->fetch_assoc();
    $_SESSION["id_primero"][1] = $row["musique"];
 
    if(isset($_SESSION["pseudo"])) $text = str_replace("nom_personnage", $_POST["perso"], $row["text"]);
                              else $text = str_replace("nom_personnage", "Karl", $row["text"]);
 
    $return_arr = array("id_primero" => $_POST["id"],
                        "id_history" => $_POST["id_history"],
                        "histoire" => $_POST["histoire"],
                        "description" => $row["text"],
                        "chg_zik" => $chg_zik,
                        "session" => $_SESSION["id_primero"][0],
                        "text" => $text,
                        "choix1" => $row["choix1"],
                        "id_choix1" => $row["id_choix1"],
                        "choix2" => $row["choix2"],
                        "id_choix2" => $row["id_choix2"],
                        "choix3" => $row["choix3"],
                        "id_choix3" => $row["id_choix3"],
                        "choix4" => $row["choix4"],
                        "id_choix4" => $row["id_choix4"],
                        "choix0" => "Précédent",
                        "id_choix0" => $row["precedent"],
                        "image" => $row["image"],
                        "musique" => $row["musique"]);
 
    $_SESSION["id_primero"][0] = $row["musique"];
 
    echo json_encode($return_arr);
?>

Voilà. Merci.

10/11/2020, 17h58
-Nikopol-

Ca ne vient, à mon avis, pas de ton code mais du routage. Ton serveur connait la route "/" (celle de ton index) mais les autres il ne les connait pas donc il renvoi une 404. Il te faut donc indiquer à ton serveur que ces routes existent et ce qu'il doit faire, ici renvoyer sur index.php

Bonjour,

Suivant la suggestion de -Nikopol-, vérifies que le statut d'ajax est bien un succès et pas erreur, donc ajoutes le callback error d'ajax :
Code:

1 2 3 4 5 6 $.ajax({ ...., success:function(recup){....}, error:function(err){alert("Erreur ajax :"+err.responseText);}//si cette fonction se déclenche cela dit qu'il y'a une erreur et le message d'erreur est enregistré dans responseText });
Remarque :
Les callback success et error sont dépréciés depuis jQuery 3.x, il faut les remplacer par done et fail.

Côté php, tu risques d'injections SQL avec ce genre de requête :$select = 'SELECT * FROM `'.$table_histoire.'` WHERE id='.$_POST["id"].' AND history='.$_POST["id_history"];, car tu passes les variables $_POST en dur à la requête, ce qui n'est pas bon pour la sécurité.

Utilises les requêtes préparées ou au moins mysqli_real_escape_string du style orienté objet.

11/11/2020, 16h27
M0h4m37

Bonjour,

Merci pour vos pistes. J'ai fait un test avec l'inspecteur du navigateur avec l'onglet network. Quand je clique sur MES boutons suivant ou précédent, le fichier "suite.php" se charge avec succès mais quand j'utilise les boutons suivant ou précédent du navigateur, il ne renvoie aucune erreur, le fichier "suite.php" ne se charge tout simplement pas. C'est bizarre...
11/11/2020, 16h30
-Nikopol-

parce que la route n'est pas connu par le serveur.
14/11/2020, 09h10
M0h4m37

Bonjour,

j'ai essayé de comprendre cette route qui n'est pas connu par le serveur, j'ai bidouillé mais je comprends pas du tout en fait.

Du coup, c'est pas sur mon code que je dois bosser mais sur la configuration de mon serveur ?
18/02/2021, 13h08
M0h4m37
J'avais laissé tomber pour remettre ce problème à plus tard et j'ai trouvé la solution !
Code:

1 2 3 4 5 6 $.ajaxSetup({ cache: false }); window.onpopstate = function(event) { if(event && event.state) { location.reload() } }
En plaçant ce code dans ma page, ma page ajax se recharge si l'utilisateur utilise les boutons du navigateur plutôt que ceux de ma page. Et ça marche nikel !