Je voudrais provoquer l'ouverture du dialogue enfant à la suite d'un clic sur son parent [Résolu]

buse974 · 24/12/2010, 09h46

Bonjour a tous,

je cherche a faire quelque chose qui pourrait paraitre facile mais je n'y arrive pas, j'explique.

html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
<div class="help">
<div class="hide" title="Aide" >coucou</div>
<div class="icon"></div>
</div>
 
 
<div class="help">
<div class="hide" title="Aide deux" >coucou deux</div>
<div class="icon"></div>
</div>

JQuery

Code :

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

1
2
3
4
5
6
 
$(".hide").dialog({autoOpen: false});
 
$(".help").click(function(){
$(this).find(".hide").dialog('open');
});

Donc voila, le but etant d'ouvrir le dialgue enfant sur le clique de son parent .help, mais la aucun résultat, firebug ne signal aucune erreur non plus.

Si quelqu'un aurait la syntaxe juste, ca serait cool, merci d'avance, ca fait 2 heure que je suis dessus, ca m'avancerait bien.

danielhagnoul · 24/12/2010, 11h12

Bonjour

Si vous examiner le code générer avec Firebug vous voyez que votre code est profondément modifié par jQuery UI Dialog et qu'il est impossible de l'appeler comme vous le faites.

N'utiliser que des classes et avoir plusieurs dialogues du même nom (div.hide) n'est pas un problème, il faut simplement changer la manière de procédé.

Vous avez plusieurs div.help qui contiennent chacune une division dialogue div.hide. Il y a donc autant de dialogues que de div.hide. Il faut donc chercher le numéro d'index de la div.help qui a été cliquée et appeler le dialogue correspondant.

index() : http://api.jquery.com/index/

UI Dialog : http://jqueryui.com/demos/dialog/

Voici un 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
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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.7.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div class="help">
	<p>Un mot pour remplir</p>
	<div class="hide" title="Aide" >coucou</div>
	<div class="icon"></div>
</div>
 
<div class="help">
	<p>Un mot pour remplir</p>
	<div class="hide" title="Aide deux" >coucou deux</div>
	<div class="icon"></div>
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
	<script>
		$(function(){
 
$("div.hide").dialog({
	autoOpen: false
});
 
$("div.help").click(function(){
	var n = $("div.help").index(this);
 
	$("div.hide").eq(n).dialog('open');
});
 
		});
	</script>
</body>  
</html>

Nota Bene : si vos dialogues sont simples et répétitifs, il est possible de travailler avec un seul dialogue et de changer le titre et le message du dialogue avant son ouverture.

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