jQuery et load()

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

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, 08h10

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, 16h10

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, 16h28

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, 17h10

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, 17h22

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

**thoas** · 23/09/2008, 17h46

Ah oui, la mise en forme :

Code :

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

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.

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

entre temps j'avais réussi avec

Code :

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

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

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

Merci beaucoup ..

et surement a bientot

jQuery et load()

jQuery

Discussions similaires

Partager

Partager