jQuery et load()

Version imprimable

jQuery et load()

Bonjour à tous,
j'ai un petit soucis au niveau du load avec jQuery, voici mon 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
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:

var url = this.href;

Sauf que je ne sais pas comment faire !!!

Merci par avance ...

23/09/2008, 08h10
Bovino

Code:

$("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:

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

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

voici le code

Code:

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

et si je fais comme ca

Code:

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 .........

hello,

Avec ça, ça fonctionne :
Code:

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 ;)

23/09/2008, 17h22
Hotfirenet
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:

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

Ah oui, la mise en forme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function(){ $('a.affDroite').click(function(){ var url = $(this).attr('href'); var msg = $('#msg'); msg.html("<img src='loading.gif' alt='chargement' />").show(); $('#droite').load(url, null, function(responseText, textStatus, XMLHttpRequest){ msg.hide(); }); return false; }); });
Là, dans tous les cas ça va te cacher ton élément même en cas d'echec va falloir que tu explores le status de l'objet XMLHttpRequest ou que tu utilises $.ajax.

Au passage, mets ta div "msg" en style:none, sinon il fera pas le show() du départ.

En espérant avoir répondu à toutes tes questions.

entre temps j'avais réussi avec

Code:

1
2
3
4
5
6
7
			    $('a.affDroite').click(function(){
			        var url = $(this).attr('href');
			        $('#droite').html('<img src="images/loading.gif" alt="chargement">').show('normal',function(){
			        	$('#droite').load(url);
			        });			        
			        return false;
			    });

23/09/2008, 17h52
Hotfirenet

Merci beaucoup ..

et surement a bientot