réécriture de l'url en ajax

Version imprimable

Bonjour,
je ne comprend pas le principe j'ai une navigation sur un mini site.
www.6tnline.com/joann/

si je fait
//document.location.replace('?page=' + page);
cela recharge ma page et donc l'ajax n'est pas utilisé.

Le xhtml :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
		<div id="menuPrincipal">
			<ul>
				<li><a href="?page=accueil" title="page de présentation">
					<img alt="menu" src="images/bouton.png" />
					<span>accueil</span>
				</a></li>
				<li><a class="menuDeroulant" href="" title="portefeuil numérique">
					<img alt="menu" src="images/bouton.png" />
					<span>+ cyberfolio</span>
				</a></li>
				<li>
					<ul class="masquerMenu">
						<li><a href="?page=videos" title="mes concepts animés">
							<img alt="menu" src="images/bouton.png" />
							<span>videos <span>&nbsp</span></span>
						</a></li>
						<li><a href="?page=graphismes" title="">
							<img alt="menu" src="images/bouton.png" />
							<span>graphismes<span>&nbsp</span></span>
						</a></li>
						<li><a href="?page=ambiancesSonores" title="ambiances sonnores">
							<img alt="menu" src="images/bouton.png" />
							<span>ambiances sonores<span>&nbsp</span></span>
 
						</a></li>
					</ul>
				</li>
				<li><a href="?page=cv" title="ma présentation professionnelle">
					<img alt="menu" src="images/bouton.png" />
					<span>curriculum vitae</span>
				</a></li>
				<li><a href="?page=contact" title="contactez moi">
					<img alt="menu" src="images/bouton.png" />
					<span>contact</span>
				</a></li>
			</ul>
		</div>
		<div id="contenu">
			<?php 
                                switch($page)
                                {
                                        case 'accueil':include 'accueil.php'; break;
                                        case 'videos':include 'videos.php';break;
                                        case 'graphismes':include 'graphismes.php';break;
                                        case 'ambiancesSonores':include 'ambiancesSonores.php';break;
                                        case 'cv':include 'cv.php';break;
                                        case 'contact':include 'contact.php';break;
                                        default :include 'accueil.php';
                                }
                        ?>
		</div>

le js :

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
	$('#menuPrincipal ul li a').click(function(){
		var $this=$(this);
		var page=$this.attr('href').substr(6);
		var contenu=$('div#contenu');
		contenu.insertBefore('en chargement...');
		if(page!='')
		{
			$('#menuPrincipal ul li a').css('fontWeight','normal').each(function(){
				$this.css({fontWeight:'bold'});	
			});
			//document.location.replace('?page=' + page);
			 $.ajax({
				 url:page+'.php',
				 data:'page='+page,
				 type:'POST',
				 global:true,
				 cache:false,
				 dataType:'html',
				 contentType:'text/html',
				 success:function(reponse){
				 	/*
				 	contenu
				 	.animate({opacity:'toggle',height:'toggle'}, 'normal', function(){
						contenu.animate({opacity:'toggle',height:'toggle'}, 'normal')
						.html(reponse);
					});
					*/
					 contenu.fadeTo(200,0,function(){
						 contenu.html(reponse).fadeTo(200,1);
						});
				 }
			 });
		}
		$this.blur();
		return false;
	});

Merci

Salut,
je ne sais pas où tu as été pêcher location.replace() mais ça n’a rien à voir avec de Ajax. Au passage, merci pour cette découverte :P J’ai mis un moment à comprendre pourquoi ça faisait pas pareil que chez moi sur ta page, je confondais avec location.href.replace() :oops:

[hors sujet]
D’ailleurs il est plutôt recommandé d’utiliser location.assign(), voir https://developer.mozilla.org/fr/DOM...#M.c3.a9thodes .
[/hors sujet]

Pour le reste, c’est assez confus et je ne comprends pas ce que tu veux faire. J’ai été voir ta page, l’Ajax marche bien à part le clic sur « cyberfolio » qui fait une requête superflue.

Voici une version nettoyée de ton 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 $('#menuPrincipal ul li a').click(function() { var $this = $(this); var page = $this.attr('href').substr(6); var contenu = $('div#contenu') if (page != '') { contenu.insertBefore('en chargement...'); $.ajax({ url: page + '.php', data: 'page=' + page, type: 'POST', global: true, cache: false, dataType: 'html', contentType: 'text/html', success: function( reponse ) { /* contenu.animate( {opacity: 'toggle', height: 'toggle'}, 'normal', function() { contenu .animate({opacity: 'toggle', height: 'toggle'}, 'normal') .html(reponse); } ); */ contenu.fadeTo(200, 0, function() { contenu.html(reponse).fadeTo(200, 1); }); } }); }; $this.blur(); return false; });
;)

Edit: Ça y est je crois que j’ai compris ce que tu veux faire :D
Tu veux que l’URL dans la barre de navigation soit modifiée quand tu cliques sur un lien Ajax, c’est bien ça ? Ça rejoint le problème connu de la gestion des « permaliens Ajax » (comme par exemple le bouton lien dans Google Maps) et de la gestion de l’hstorique en Ajax (une recherche Google sur ces deux sujets est intéressante). Comme piste je te propose de manipuler la chaîne location.hash.

30/07/2010, 16h25
SpaceFrog

Je pense en effet qu'il doit s'agir de la problématique du référencement des pages lors d'uen navigation ajax.
Le but d'ajax est précisément de ne pas changer de page.
La seule possibilité d'agir sur le contenu de la barre d'adresse sans quitter la page est en effet location hash, mais tu ne modifies que la partie de l'adresse aprèr un #

après chaque fin de requete ajax :

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
37
38
39
40
41
42
		// navigation ajax	
	$('#menuPrincipal ul li a').click(function(){
		var $this=$(this);
		var page=$this.attr('href').substr(8);
		var contenu=$('div#contenu');
		contenu.insertBefore('en chargement...');
		if(page!='')
		{
			$('#menuPrincipal ul li a').css('fontWeight','normal').each(function(){
				$this.css({fontWeight:'bold'});	
			});
			 $.ajax({
				 url:page+'.php',
				 data:'#'+page,
				 type:'POST',
				 global:true,
				 cache:false,
				 dataType:'html',
				 contentType:'text/html',
				 success:function(reponse){
				 	/*
				 	contenu
				 	.animate({opacity:'toggle',height:'toggle'}, 'normal', function(){
						contenu.animate({opacity:'toggle',height:'toggle'}, 'normal')
						.html(reponse);
					});
					*/
					 contenu.fadeTo(200,0,function(){
						 contenu.html(reponse).fadeTo(200,1);
						});
				 }
			 });
			// mise à jour de l'ancre
			var lien=document.location.href;
			var lien=lien.replace(/^.*#\//, '');
			//suppression des caractères #/
			var updateHash=document.location.hash=page;
   			//alert(updateHash);
		}	
		$this.blur();
		return false;
	});

l'url change mais pas le contenu forcément...
Merci