Chargement de contenu AJAX

JeromeC# · 11/03/2011, 00h05

Bonjour à tous.

Une nouvelle fois, je fais appelle à vos connaissances pour m'aider à comprendre...

Mon but et de pouvoir, en cliquant sur un lien dans une page html, charger la page ciblée ou un fragment de celle-ci et l'afficher dans une div. Un jeu d'enfant, il semble. Pourtant je n'y arrive pas. J'ai lu la doc jQuery, googler des dizaines de pages, mais rien à faire. Il doit y avoir un élément qui m'a échappé, une virgule ou je ne sais quoi, mais rien ne s'affiche dans ma page principale.

Je vous colle ci-dessous mes deux pages. J'ai volontairement omis le code CSS d'index.html.

index.html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<title>Chargement AJAX</title>
 
		<link rel="stylesheet" href="css/dico.css" type="text/css" media="screen" />
		<script src="scripts/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				$('#Nav ul a').click(function() {
					$('#Content').load(this.href + '#container');
					return false;
				});
			});
		</script>
		<style>
			...
		</style>
	</head>
	<body>
		<div id="Main">
			<div id="Header"><h1>Chargement de contenu...</h1></div>
			<div id="Nav">
				<ul>
					<li><a href="pages/a.html" title="Page A" class="load">Page A</a></li>
					<li><a href="pages/b.html" title="Page B" class="load">Page B</a></li>
					<li><a href="pages/c.html" title="Page C" class="load">Page C</a></li>
				</ul>
			</div>
			<div id="Content">
 
			</div>
		</div>
	</body>
</html>

a.html

Code :

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

1
2
3
 
Page A
<div id="container">Contenu de la div dans page A</div>

Je précise que la version de jQuery est la 1.5.1 (la dernière).

D'avance merci pour votre aide et conseils.

Jerome

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email