jQuery et load()

**Hotfirenet** · 22/09/2008, 12h59

Bonjour à tous,
j'ai un petit soucis au niveau du load avec jQuery, voici 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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>                                                                  
	<head>           
		<title>Apprentissage jQuery - Exemple 7</title>    
		<script type="text/javascript" src="lib/js/jquery.js"></script>   
		<script type="text/javascript">
			$(document).ready(function(){
				$("a.affDroite").click(function(){	
					var url = this.href;
					$("#msg").html('<img src="loading.gif" alt="chargement">').show("normal", function(){
						$("#droite").load(url, null, function(){
							 $("#msg").hide();
						});
					});					
					return false;
				});						
			});		
		</script>
		<style type="text/css">
			#gauche
			{
				float: left;
			}
 
			#droite
			{
				float: left;
			}
		</style>                                                 
	</head>                                                                 
	<body>                  
		<div id="gauche">
			<ul>
				<li>Base 1
					<ul>
						<li><a href="exemple7Table.php?id=table1" class="affDroite">Table 1</a>
							<ul>
								<li><a href="exemple7Champ.php?id=champ1" class="affDroite">Champs 1</a></li>
								<li><a href="exemple7Champ.php?id=champ2" class="affDroite">Champs 2</a></li>
								<li><a href="exemple7Champ.php?id=champ3" class="affDroite">Champs 3</a></li>
								<li><a href="exemple7Champ.php?id=champ4" class="affDroite">Champs 4</a></li>
								<li><a href="exemple7Champ.php?id=champ5" class="affDroite">Champs 5</a></li>
							</ul>
						<li><a href="exemple7Table.php?id=table2" class="affDroite">Table 2</a>
							<ul>
								<li>Champs 1</li>
								<li>Champs 2</li>
								<li>Champs 3</li>
								<li>Champs 4</li>
								<li>Champs 5</li>
							</ul>							
						</li>
					</ul>
				</li>
				<li>Base 2
					<ul>
						<li>Table 1
							<ul>
								<li>Champs 1</li>
								<li>Champs 2</li>
								<li>Champs 3</li>
								<li>Champs 4</li>
								<li>Champs 5</li>
							</ul>
						<li>Table 2
							<ul>
								<li>Champs 1</li>
								<li>Champs 2</li>
								<li>Champs 3</li>
								<li>Champs 4</li>
								<li>Champs 5</li>
							</ul>							
						</li>
					</ul>
				</li>				
			</ul>
		</div>
		<div id="droite">
			<div id="msg"></div>
		</div>
	</body>                                                                 
</html>

Lorsque je clic sur un lien tous se passe bien sauf que lorsque je re-clic sur un autre lien plus rien ne se passe !!

je pense que ça vient du :

Code :

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

var url = this.href;

Sauf que je ne sais pas comment faire !!!

Merci par avance ...

**Bovino** · 23/09/2008, 09h10

Code :

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

$("a.affDroite").click(function()

Je pense plutôt que ça vient de là, à priori, tu ne précises d'affecter la fonction qu'au premier des éléments trouvés.
Rajoutes un each.

Code :

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

$("a.affDroite").each(function(){this.click(function()...

**Hotfirenet** · 23/09/2008, 17h10

J'y ai pensé après avoir vu un exemple mais j'ai toujours le même problème

voici le code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
			$(document).ready(function(){
				$("a.affDroite").each(function() {
					var url = this.href;
					$(this).click(function(){	
						$("#msg").html('<img src="loading.gif" alt="chargement">').show("normal", function(){
								$("#droite").load(url);
								alert(url);
							});
					return false;
					});
				})
			});

on dirais qu'il ne refait pas la boucle

**Hotfirenet** · 23/09/2008, 17h28

et si je fais comme ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
			$(document).ready(function(){
				$("a.affDroite").each(function() {
					$(this).click(function(){	
						url = this.href;
						$("#msg").html('<img src="loading.gif" alt="chargement">').show("normal", function(){								
								//$("#droite").load(url);
								alert(url);
								$("#msg").hide();
							});
						return false;
					});
				})
			});

j'ai bien dans l'alert le contenu de mon lien mais des que je remet le load ça déconne.

d'ou est ce que ça peut venir ??

Merci par avance .........

**thoas** · 23/09/2008, 18h10

hello,

Avec ça, ça fonctionne :

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
    $('a.affDroite').click(function(){
        var url = $(this).attr('href');
        console.log(url); // affichage dans firebug
        $('#droite').load(url);
        return false;
    });
});

Pas besoin du each() vu que jquery comprend que tu veux un tableau d'éléments, ton erreur était uniquement que tu ne "castais" pas l'objet DOM en objet JQuery.

En ce qui concerne le "return false", je l'ai laissé même s'il me semble qu'il y a un moyen plus propre.

Bon apprentissage

**Hotfirenet** · 23/09/2008, 18h22

c'est gentil merci mais en faite le temps du chargement de la page je voulais mettre un message d'attente pour dire que la page charge

il me manque ici cette partie justement ;/

sinon j'arrivai déjà a charger en faisant :

Code :

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

1
2
3
4
5
6
7
 
			$(document).ready(function(){
				$("a.affDroite").click(function(){	
					$("#droite").load(this.href);					
					return false;
				});						
			});

merci quand meme

jQuery et load()

jQuery

Vue hybride

Discussions similaires

Partager

Partager