Discussion :

[orion99]

Bonjour à tous,

J'ai cherché et encore cherché mais je n'arrive pas au résultat attendu, aussi je viens vers vous en espérant que vous serez peut-être plus éclairé que moi

Je souhaiterai faire un site full ajax, autrement dis lorsqu'un utilisateur clique sur un lien, ce n'est pas la page au complet qui est rechargée mais juste l'information dont j'ai besoin grâce à de l'ajax.
Cependant, dans la mesure du possible je souhaiterai mettre à jour l'historique de navigation de l'utilisateur, je souhaiterai donc me servir de l'API history.

La partie ajax en elle-même fonctionne bien, je clique sur un lien et sa m'affiche la page souhaitée, cependant je rencontre des problème avec l'historique.

Tout d'abord, voici le code js:

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
function load(url, isHistory) {
	$.ajax({
		method: 	'GET',
		url: 	url,
		success: function(data) {
			$('#content').html(data);
 
			if ( isHistory )
				history.pushState({url: this.url}, 'description', this.url);
		},
		error: function(xhr, status, error) {
			console.log('error');
			console.log(status + ' ' + error);
		}
	});
}
 
window.onpopstate = function(event) {
	// Si c'est une des page "normale" du site
	if ( event.state != null )
		load(event.state.url, false);
 
	// Si c'est la page d'entrée
	else
		load(location.href, false);
};
 
$('#content').on('click', 'a', function(event) {
	event.preventDefault();
	load($(this).attr('href'), true)
});

Notez que le php renvoie la page avec ou sans la structure suivant cette condition (pour permettre de partager n'importe quel lien)

Code php :

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

<?php isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'

Avec ce code, voici ce qui fonctionne bien:

• Si j'avance d'une ou plusieurs page, je peux faire précédente jusqu'à la page d'accueil
• Si j'ai fais précédente je peux faire suivante

Et ce qui ne fonctionne pas:

• Si je fais actualisé sur une page, elle est d'abord chargée via le navigateur, ensuite via une requête ajax rechargeant la même chose.
• Si j'étais sur un autre domaine, que je vais sur mon site full ajax, que je navigue, puis je fais des précédente jusqu'à revenir sur l'autre domaine pour enfin revenir sur mon site avec un suivante, j'ai perdu la structure du site.
• Dans les différents tuto que j'ai pu lire, quand j'ai fais les tests sur les démos sa marchais, et malgrés le fait que je les ai suivit chez moi sa ne marche pas

A dernière petite info (au cas où) je suis sur google chrome, je n'ai pas encore essayé les autres navigateurs.

Voilà, merci d'avance pour votre aide
Cordialement, orion99

[sekaijin]

je suis pas sur d'avoir saisi où est ton problème

mais ce n'est pas tout de changer d'url il faut aussi être capable de reconstruire la page en l'état.

soit un page A un clic sur un élément modifie l'objet a et change l'URL en B
une navigation dans l'historique qui revient sur A recharge la page A
lorsque tu passe ensuite sur B le navigateur n'a pas une copie de l'état de ta page A avec la modif de a il te faut donc la reconstruire.

A+JYT