Discussion :

[Gueuz]

Bonjour à tous,

J'ai un (petit) site ou j'ai tout le contenu contenu dans des div qui sont masqué. Je les affiches en fonction du menu qui es sélectionné par le visiteur. Du coup, j'ai le même problème que si le site était réalisé avec AJAX.

J'ai ce code :

Code :

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

1
2
3
4
var lien = $this.attr("href");
var titre = $this.attr("title");
history.pushState('', titre + ' | AJAX Accessible', lien);
document.title = titre + ' | AJAX Accessible';

La ligne history.pushState pose problème, notamment FireFox parle d'un problème de sécurité. Est-ce que quelqu'un peut me venir en aide.

J'ai bien sûr cherché, essayé différents trucs, lus plusieurs articles mais rien à faire ça ne fonctionne pas.

Merci pour votre aide.

[Bovino]

J'imagine que tu testes dans un fichier local, c'est à dire depuis un fichier ouvert directement en double cliquant dessus (file:/// au début de l'URL).
Essaye depuis un serveur Web et ça devrait fonctionner.

[Gueuz]

Effectivement ça fonctionne. J'ai remarqué que tout se qui tourne au tour de AJAX demande d'être hébergé. Quels en sont les raisons ? Quels spec doivent être réunies ? Merci.

[Gueuz]

Bon là j'ai un autre problème, c'est bien hébergé sur un serveur.

J'ai ce 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
window.onpopstate = function(event) {
	//alert("Ma location : " + location.pathname);
	var location = location.pathname;
	var locationString = new String(location);
	var locationSliceEnd = locationString.slice(0, -5);
	var locationSliceStart = locationSliceEnd.slice(7);
	console.log("Ma location : " + locationSliceStart);
	alert("Ma location : " + locationSliceStart);
	$.ajax({
		url: location.pathname,
		success: function(data){
			//var location = '#menu-' + location.pathname;
			var location = location.pathname;
			var locationString = new String(location);
			var locationSliceEnd = locationString.slice(0, -5);
			var locationSliceStart = locationSliceEnd.slice(7);
			console.log("Ma location : " + locationSliceStart);
			//$('#menu-' + contact).click();
		}
	});
};

Le code est doublé uniquement pour les tests...

Je ne comprends pas pourquoi dans les premières lignes de la fonction, si j'ai ceci :

Code :

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

alert("Ma location : " + location.pathname);

Ca fonctionne, alors que si je met :

Code :

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

var location = location.pathname;

Ce ne fonctionne pas, il me dit que location.pathname n'est pas défini.

location.pathname me donne mon adresse complète qui correspond au href de mon lien, donc quelque chose comme mapage.html, d'où les slices.
Le $('#menu-' + 'contact').click(); ne fonctionne pas pour le moment, je ne comprends pas pourquoi non plus alors que quelques lignes plus bas, la même commande fonctionne.

Merci pour votre aide, je tourne en rond...

[JérémieL]

Bonjour,

Il s'agit d'un problème de scope de variables. Tu as deux variables différentes nommées location :

- Une variable globale, qui correspond implicitement à window.location ;
- Une variable locale à ta fonction, qui va être utilisée après sa déclaration.

En faisant :

Code js :

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

var location = location.pathname;

Sauf erreur, tu essaies de récupérer l'attribut pathname de la variable locale qui vient juste d'être déclarée.

Donc change le nom de ta variable, et évite d'utiliser cette variable globale implicite mais plutôt window.location.

[Gueuz]

Pffff, j'ai honte, voilà se que c'est d'être la tête dans le guidon, merci pour ta réponse.

Bon, j'ai apporté des modifications à 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
window.onpopstate = function(event) {
	var myLocation = location.pathname;
	var locationString = new String(myLocation);
	var locationSliceEnd = locationString.slice(0, -5);
	var locationSliceStart = locationSliceEnd.slice(7);
	alert("Ma location : " + locationSliceStart);
 
	$.ajax({
		url: location.pathname,
		success: function(data){
                        alert('toto');
			$('#menu-' + 'contact').click();
		}
	});
};

Donc le alert m'affiche bien l'information recherché, j'isole se dont j'ai besoin. Le alert('toto') lui, ne s'affiche même pas d'ailleurs.
Par contre, la ligne $('#menu-' + 'contact').click();, elle, ne fonctionne pas, pourtant elle est en "dur". La variable locationSliceStart prendra la place de 'contact' mais pour le moment, il ne se passe rien. Je ne comprends pas pourquoi.

Précision : je ne fais pas du "vrai" AJAX, dans le sens où mon site complet est affiché dès la première page (les div sont masqués et affiché en fonction des clicks sur le menu). J'ai procédé comme ceci car j'ai peut d'informations à afficher, pas de BDD ni de PHP.

Autre question : J'ai bien mon url de cette forme : www.monsite.com/contact.html

Mais si je copie colle cette adresse, évidemment la page contact ne s'affiche pas. J'ai en tête de faire un petit code JS qui regarde l'adresse entrée et dans ce cas, récupérer le mot contact et simuler un click de souris, est-ce correct ?

J'ai ce code, qui es utilisé pour des liens autre que le menu principal :

Code :

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

1
2
3
4
5
6
7
8
9
$('a.action-menu-js').click(function(e) {
	e.preventDefault();
	$this = $(this);
	var classList = $this.attr('class');
	var classLoc = /action-menu-loc-[a-z0-9._-]+/i.exec(classList);
	var tmp = new String(classLoc);
	var location = tmp.slice(16);
	$('#menu-' + location).click();
});

Ce code fonctionne parfaitement, donc je ne comprends pas pourquoi sur le premier ceci ne fonctionne pas.
En gros, je sélectionne toutes mes classes du lien cliqué, je fais ma tambouille pour récupérer le mot qui indique là où l'utilisateur veut se rendre et ensuite je simule un click. Celui-ci fonctionne, contrairement window.onpopstate qui lui, est en dur.

Est-ce que je suis clair ?

[Bovino]

est-ce correct ?

Non bien sûr, car si tu appelles cette URL dans le navigateur, il va chercher ce fichier précisément, et s'il n'existe pas, te renverra une erreur 404 !
Ce sont les ancres qu'il faut utiliser pour ce type de navigation !
Ajax et le référencement.

[Gueuz]

Je ne suis pas sur de comprendre ton message... J'ai bien une erreur 404 effectivement, je dois faire se qui es dis dans le chapitre "Gestion de l'URL avec AJAX" du lien que tu m'as passé non ?

[Gueuz]

Si je comprends bien je dois mettre dans mes href, ce genre de chose :

Code :

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

/#page1.html

Avec document.location.replace je peux changer l'adresse du site et passer de www.monsiteweb.com/#page1.html à www.monsiteweb.com/#page2.html ?

J'essaye des trucs là mais pour le moment ça ne marche pas. Je connais le principe des ancres mais je n'arrive pas à l'appliquer dans mon cas.