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

AJAX et bouton précédent du navigateur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager