AJAX et bouton précédent du navigateur

**M0h4m37** · 09/11/2020, 10h05

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.

**Toufik83** · 09/11/2020, 14h37

Bonjour,

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

**M0h4m37** · 09/11/2020, 18h08

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 :

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

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.

**Toufik83** · 09/11/2020, 22h40

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...

**M0h4m37** · 10/11/2020, 17h48

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 :

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
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 :

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
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.

**-Nikopol-** · 10/11/2020, 17h58

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

**Toufik83** · 10/11/2020, 20h24

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 :

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

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.

**M0h4m37** · 11/11/2020, 16h27

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...

**-Nikopol-** · 11/11/2020, 16h30

parce que la route n'est pas connu par le serveur.

**M0h4m37** · 14/11/2020, 09h10

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 ?

**M0h4m37** · 18/02/2021, 13h08

J'avais laissé tomber pour remettre ce problème à plus tard et j'ai trouvé la solution !

Code :

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

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 !

AJAX et bouton précédent du navigateur

JavaScript

Discussions similaires

Partager

Partager