Nav ajax: plusieurs niveaux de chargement d'html

**franckichmish** · 07/02/2012, 15h43

Bonjour,

Passez au message suivant qui simplifie ma demande

Je suis en train de concevoir une page html à partir d'un XML. jQuery est là pour charger les bons éléments lors de la navigation. L'url doit rester la même, ce n'est pas une question de référencement.
Il y a 3 niveaux de balises dans le XML et qui se retrouvent sur le HTML final sous forme de lien.

Au clic d'un lien de niveau 1, les niveaux enfants (niv 2 et 3) sont mis à jour. Jusque là ça va, mais lorsqu'on clique un lien de niveau 2 pour mettre à jour le niveau 3, le javascript n'est plus pris en compte et l'url est réécrite.

La seule solution que j'ai trouvée est de recharger le JS (ligne 34 du code JS) sauf que si tu regardes ds la console de Firebug, tu t'aperçois que le JS est chargé exponantiellement (1 fois, puis 2 puis 4...) à tel point qu'en navigant qq minutes, on constate très vite le ralentissement du site

Est-ce que qqn aurait une solution ? Merci d'avance
Voici mes codes html, XML et 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
<!DOCTYPE html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="navigation_light.js"></script>
</head>
<body>
	<div id="niv1">
		<a href="titre1/">Titre 1</a>
		<a href="titre2/">Titre 2</a>
	</div>
 
	<div id="niv2"></div>
 
	<div id="niv3"></div>
 
</body>
</html>

Fichier myXML.xml

Code :

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

1
2
3
4
5
6
7
8
9
10
<racine>
	<niv1 name="niv1 1" url="titre1">
		<niv2 name="niv2 1A" url="sub1A"><![CDATA[<p>niv2 <strong>1A</strong></p>]]></niv2>
		<niv2 name="niv2 1B" url="sub1B"><![CDATA[<p>niv2 <strong>1B</strong></p>]]></niv2>
	</niv1>
	<niv1 name="niv1 2" url="titre2">
		<niv2 name="niv2 2A" url="sub1A"><![CDATA[<p>niv2 <strong>2A</strong></p>]]></niv2>
		<niv2 name="niv2 2B" url="sub2B"><![CDATA[<p>niv2 <strong>2B</strong></p>]]></niv2>
	</niv1>
</racine>

Fichier navigation_light.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function(){
	$("#niv1 a").click(function(){
		url = $(this).attr("href");
 
		$.ajax({
			type: "GET",
			url : "myXML.xml",
			dataType:"xml",
			success:function(xml){
				afficher(xml, url);
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			}
		});
 
		return false;
	});
 
	$("#niv2 a").click(function(){
		$("#niv3").empty();
		$("#niv3").append($(this).attr("href"));
		return false;
	});
});
 
 
function afficher(xml, url){
	p = url.split('/');
	lev1 = p[0];
	lev2 = p[1];
	niv3 ='<script type="text/javascript" src="navigation_light.js"></script>';
 
	$(xml).find('niv1').each(function(){
		if($(this).attr('url') == lev1)
		{
			$(this).find('niv2').each(function(){
				niv3 += '<a href="'+lev1+'/'+$(this).attr('url')+'">'+$(this).text()+'</a>';
			});
 
			$("#niv2").empty();
			$("#niv2").append(niv3);
 
			$("#niv3").empty();
		}
	});
}

**franckichmish** · 10/02/2012, 11h27

Salut,

Ma première demande était trop complexe, je simplifie avec cet exemple :

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
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>JQUERY</title>
	<style type="text/css"> div{margin:10px; padding:5px; border:1px solid #000;}</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
$(document).ready(function(){
	$("#one a").click(function(){
 
		$("#two").empty();
		$("#two").append('<a href="index.html?chap=3">Lorem ipsum 3</a><br /><a href="index.html?chap=4">Lorem ipsum 4</a>');
 
		return false;
	});
	$("#two a").click(function(){
		$("#three").empty();
		$("#three").append($(this).attr('href'));
 
		return false;
	});
});
	</script>
</head>
<body>
	<a href="index.html">Reset</a>
	<div id="one"><a href="">Lorem ipsum 0</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
	<div id="two"><a href="index.html?chap=1">Lorem ipsum 1</a><br /><a href="index.html?chap=2">Lorem ipsum 2</a></div>
	<div id="three"></div>
</body>
</html>

Si je clique un lien du 2e bloc, le 3e récupère les données que je veux.

Par contre si je clique le lien du 1er bloc, ça change ceux du 2e; et là le pb se pose:
En cliquant sur un de ces nouveaux liens du bloc 2, le bloc 3 ne récupère pas les données et la page se recharge entièrement

Y aurait-il un moyen de réparer ça ?

**danielhagnoul** · 10/02/2012, 13h15

Bonjour

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="container123">
	<a href="index.html">Reset</a>
	<div id="one">
		<a href="">Lorem ipsum 0</a> 
		dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
	<div id="two">
		<a href="index.html?chap=1">Lorem ipsum 1</a>
		<br />
		<a href="index.html?chap=2">Lorem ipsum 2</a>
	</div>
	<div id="three"></div>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
$( "#container123" ).on( "click", "#one a", function(){
	$("#two").html('<a href="index.html?chap=3">Lorem ipsum 3</a><br /><a href="index.html?chap=4">Lorem ipsum 4</a>');
	return false;
});
 
$( "#container123" ).on( "click", "#two a",function(){
	var self = this;
	$("#three").html( $( self ).attr('href') );
	return false;
});

**franckichmish** · 12/02/2012, 23h45

Merci Daniel. Tu m'enlèves une épine !

Nav ajax: plusieurs niveaux de chargement d'html

jQuery

Discussions similaires

Partager

Partager