Discussion :

[M0h4m37]

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]

Bonjour,

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

[M0h4m37]

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]

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]

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

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