Changer la valeur du hash

**axel584** · 25/11/2017, 14h09

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 :

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
 
$(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

**ABCIWEB** · 25/11/2017, 16h11

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

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

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

**axel584** · 26/11/2017, 18h31

Excuse moi, j'ai oublié d'indiquer que dans mes pages, j'ai des boutons du type :

Code :

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

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

**ABCIWEB** · 26/11/2017, 19h08

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) ?

**axel584** · 26/11/2017, 23h47

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 :

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

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

ne fonctionne pas et l'url ne change pas.

Merci pour votre aide,

Axel

**ABCIWEB** · 27/11/2017, 03h31

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

Code HTML :

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

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

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

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

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.

**axel584** · 27/11/2017, 14h26

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

Changer la valeur du hash

JavaScript

Discussions similaires

Partager

Partager