Changer la valeur du hash

Version imprimable

Bonjour,
Je suis en train de faire une petite application html/javascript dont les pages se chargent en ajax (SPA)

Et j'aimerai conserver "l'adresse" de la page en cours dans l'url sous la forme #ma_page
Mais je n'arrive pas à changer le contenu plus d'une fois (ça fonctionne une première fois et après, ça ne fonctionne plus). Je ne comprends pas trop à quoi s'est dû.

voici mon code :
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 $(document).ready(function() { if ($(location).attr('hash')) { charge($(location).attr('hash').substr(1)); } else { // par defaut, si aucune page indiqué dans l'url, on charge la page splashscreen charge("splashscreen"); } function charge(page) { $(location).attr('hash', page); // C'EST ICI QUE J'ESSAYE DE CHANGER L'ADRESSE $( "#app" ).load( "html/"+page+".html",function () { $(".btn").click(function () { var target = $(this).data("target"); charge(target); $("body").scrollTop(0); }); }); }; });
Par défaut, j'arrive bien sur ma page qui se "renomme" automatiquement en #splashscreen
Mais après, quand je vais sur les pages suivantes, ça ne fonctionne plus.
A chaque chargement de page, j'ajoute le code sur le "onClick" pour pouvoir accéder aux pages suivantes...

Merci pour votre aide,

Axel

Salut,

C'est quoi var target = $(this).data("target"); ?

Essaies plutôt avec html si tu veux récupérer le contenu, par exemple :

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
 
        if ($(location).attr('hash')) {
                charge($(location).attr('hash').substr(1));
        } else {
                // par defaut, si aucune page indiqué dans l'url, on charge la page splashscreen
                charge("splashscreen"); 
        }
 
        function charge(page) {
                $(location).attr('hash', page); // C'EST ICI QUE J'ESSAYE DE CHANGER L'ADRESSE
                $( "#app" ).load(page+".html",function () {
                                                                                                
                        $(".btn").on('click',function () {
                                var target = $(this).html();
                                charge(target);
                                $("body").scrollTop(0);
                        });
 
                });
        };
});
</script> 
</head>
<body>
 
<div id="app"></div>
 
</body>
</html>

ça fonctionne pour peu que splashscreen.html et Page2.html soient définies et contiennent respectivement <div class="btn">Page2</div> et <div class="btn">splashscreen</div>

Si tu veux intégrer tes menus dans la page initiale il faut externaliser les onclick sur les menu

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
 
 
        if ($(location).attr('hash')) {
                charge($(location).attr('hash').substr(1));
        } else {
                // par defaut, si aucune page indiqué dans l'url, on charge la page splashscreen
                charge("splashscreen"); 
        }
 
        function charge(page) {
                $(location).attr('hash', page); // C'EST ICI QUE J'ESSAYE DE CHANGER L'ADRESSE
                $( "#app" ).load(page+".html",function () {                                                             
                                $("body").scrollTop(0);
                });
        };
 
        $(".btn").on('click',function () {
                var target = $(this).html();
                charge(target);
        });
 
});
</script> 
</head>
<body>
<div id="app"></div>
<div class="btn">splashscreen</div>
<div class="btn">Page2</div>
</body>
</html>

26/11/2017, 18h31
axel584
Excuse moi, j'ai oublié d'indiquer que dans mes pages, j'ai des boutons du type :
Code:

1 2 <button class="btn waves-effect waves-light blue" data-target="14">Suivant</button>
Et du coup, il prends la valeur de "target" pour savoir quelle page charger (ici, il va charger la page 14.html)

Le chargement fonctionne très bien, ce qui ne marche pas, c'est le changement d'url. Je voudrais que mon url devienne :
monsite/#14

Comme ça, une fois arrivé sur la page 14, si je fais "raffraichir" la page, je reste sur cette page (car le début de mon code va vérifier si j'ai une valeur dans $(location).attr('hash') et y accéder.

Bref, le seul truc qui ne fonctionne pas, c'est le fait de changer l'url de la page.

Merci pour votre aide,

Axel
26/11/2017, 19h08
ABCIWEB

Citation:

Envoyé par axel584

Je voudrais que mon url devienne :
monsite/#14

et pourquoi pas monsite/index.html#14 (si ta page initiale est index.html) ?
26/11/2017, 23h47
axel584

Oui, oui, ce serait très bien. En fait, quelque soit l'adresse à laquelle j'accède à ma page, je voudrais que mon code change la partie après le #

Ma fonction :

Code:

$(location).attr('hash', page);

ne fonctionne pas et l'url ne change pas.

Merci pour votre aide,

Axel

Je ne vois pas ce qui ne fonctionne pas. Je viens de tester ce code :

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
 
 
        if ($(location).attr('hash')) {
                charge($(location).attr('hash').substr(1));
        } else {
                // par defaut, si aucune page indiqué dans l'url, on charge la page splashscreen
                charge("splashscreen"); 
        }
 
        function charge(page) {
                $(location).attr('hash', page); // C'EST ICI QUE J'ESSAYE DE CHANGER L'ADRESSE
                $( "#app" ).load(page+".html",function () {
                        $(".btn").click(function () {
                                var target = $(this).data("target");
                                charge(target);
                                $("body").scrollTop(0);
                        });
 
                });
        };
 
});
</script> 
</head>
<body>
 
<div id="app"></div>
 
</body>
</html>

page splashscreen.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
</head>
 
<body>
Hello !
<button class="btn waves-effect waves-light blue" data-target="page-2">Suivant</button>
</body>
</html>

page page-2.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
</head>
 
<body>
Et re bonjour !
<button class="btn waves-effect waves-light blue" data-target="splashscreen">Suivant</button>
</body>
</html>

Fais des test avec ces trois fichiers et dis-moi ce qui ne fonctionne pas. Chez moi l'url change et tout fonctionne correctement.

27/11/2017, 14h26
axel584

Merci beaucoup.

Ton exemple fonctionne parfaitement...

Et du coup, je me suis rendu compte que ça n'avait rien à voir avec mon code, mais ça merdait quand j'active le plug-in ripple qui est un plug-in Chrome permettant de simuler un environnement "mobile" pour pouvoir générer des applications android/iOS avec Cordova.

Encore merci pour ton aide.

Axel