récupération de variable dans jquery

Version imprimable

voici mon code html

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
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Dialog - Animation</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
        var title=$(this).attr("title");
                $test=('#' + title)
                $("span").text(title);
                $($test).dialog({
                        autoOpen: false,
                        show: 'blind',
                        hide: 'explode'
                });
                
                $('a#opener').click(function() {
                        var title=$(this).attr("title");
                        $test=('#' + title)
                        $($test).dialog({
                        autoOpen: false,
                        show: 'blind',
                        hide: 'explode'
                });
                        return false;
                });
        });
        </script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
 
<a href="#" id="opener" title="dialog">Page 1</a>
 
<a href="#" id="opener" title="dialog2">Page 2</a>
<span></span>
</div><!-- End demo -->
 
<div class="demo-description">
 
 
 
</div><!-- End demo-description -->
 
</body>

Je souhaiterais recuperer lorsque je clic sur un de mes liens Page 1 ou Page 2
le title de la balise afin de pouvoir ouvrir avec jquey le Div qui lui correspond.

22/06/2011, 19h06
Bovino

Un id doit être unique dans le document !
22/06/2011, 19h31
vladock

Ok merci bien,

Mais alors que me proposez vous pour pouvoir utiliser la fonction dialogue box de jquery avec plusieurs lien sur la même page comme je l'avais précédemment

Par exemple changer les id en classes :

Code:

1
2
3
<a href="#" class="opener" title="dialog">Page 1</a>
 
<a href="#" class="opener" title="dialog2">Page 2</a>

Code:

1
2
3
4
5
6
7
8
9
10
$('a.opener').click(function() {
	var title=$(this).attr("title");
	$test=('#' + title)
	$($test).dialog({
		autoOpen: false,
		show: 'blind',
		hide: 'explode'
	});
		return false;
});

D'autre part, à quoi correspond cette partie

Code:

1
2
3
4
$(function() {
    var title=$(this).attr("title");
    ...
});

???

Voici tout mon code , vous pouvez l'executer pour voir ce ke ça donne

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Dialog - Animation</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$('#dialog').dialog({
			autoOpen: false,
			show: 'blind',
			hide: 'explode'
		});
 
		$('a#opener').click(function() {
			var title=$(this).attr("title");
			$test=('#' + title)
            $("span").text($test);
			$($test).dialog('open');
			return false;
		});
	});
	</script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
 
<a href="#" id="opener" title="dialog">Page 1</a>
 
<a href="#" id="opener" title="dialog2">Page 2</a>
<span></span>
</div><!-- End demo -->
 
<div class="demo-description">
 
 
 
</div><!-- End demo-description -->
 
</body>
</html>

concenant la partie var title=$(this).attr("title"); c'eatit pour recupere le title de mon lien afin de pouvoir ouvrir des div différents lorsque je cliquerais sur les différents lien que j'ai dans ma page

22/06/2011, 19h57
vladock

O fait ce que je cherche a faire c'est :
si je clic sur Page 1 je dois voir s'afficher le contenu de la div avec l'id dialog

et si je clique sur Page 2 je dois voir s'afficher le contenu de la div avec l'id dialog2

et ainsi de suite si j'ai plusieurs lien

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
<a href="#" class="opener" data-dialog-opener="dialog" title="Ce lien ouvre le dialogue n° 1">Page 1</a>
 
<a href="#" class="opener" data-dialog-opener="dialog2" title="Ce lien ouvre le dialogue n° 2">Page 2</a>

Code:

1
2
3
4
5
6
7
8
9
10
11
$("#dialog, #dialog2").dialog({
	autoOpen: false,
	show: 'blind',
	hide: 'explode'
});
 
$(".opener").click(function() {
	$('#' + $(this).data("dialogOpener")).dialog('open');
 
	return false;
});

Bonjour et merci bien pour votre reponse

j'ai tester ce que vous m'avez envoyer mais ça ne fonctionne pas.
Peut etre que je m'y prend mal voici ce que j'ai fais

dialogOpener

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Dialog - Animation</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$("#dialog, #dialog2").dialog({
			autoOpen: false,
			show: 'blind',
			hide: 'explode'
		});
 
		$(".opener").click(function() {
			$('#' + $(this).data("dialogOpener")).dialog('open');
 
			return false;
		});
 
	});	
	</script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
<a href="#" class="opener" data-dialog-opener="dialog" title="Ce lien ouvre le dialogue n° 1">Page 1</a>
 
<a href="#" class="opener" data-dialog-opener="dialog2" title="Ce lien ouvre le dialogue n° 2">Page 2</a>
 
 
</div><!-- End demo -->
 
<div class="demo-description">
 
 
 
</div><!-- End demo-description -->
 
</body>
</html>

Aussi je voudrais vous poser une question

d'ou provient data("dialogOpener")

Bonsoir

Sachez que je teste toujours mes exemples de code avant de les donner (ce qui me prends beaucoup de temps) et lorsque ce n'est pas possible j'écris :"je suggère d'essayer".

Rassurez-vous, je ne suis pas infaillible et il m'arrive de me tromper comme tout le monde. ;)

Votre problème c'est l'utilisation d'un "head" dantesque (un cauchemar de programmeur jQuery :mouarf:) et la non-utilisation des serveurs de code et de la dernière version stable des outils.

Voici l'exemple dans une page complète :
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 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css"> </head> <body> <div id="dialog" title="Page 1" style="display:none;"> <p>Bonjour mr Bouazo je suis la page 1</p> </div> <div id="dialog2" title="Page 2" style="display:none;" > <p>Bonjour mr Bouazo je suis la page 2</p> </div> <a href="#" class="opener" data-dialog-opener="dialog" title="Ce lien ouvre le dialogue n° 1">Page 1</a> <a href="#" class="opener" data-dialog-opener="dialog2" title="Ce lien ouvre le dialogue n° 2">Page 2</a> <script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script> $(function() { // increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $("#dialog, #dialog2").dialog({ autoOpen: false, show: 'blind', hide: 'explode' }); $(".opener").click(function() { $('#' + $(this).data("dialogOpener")).dialog('open'); return false; }); }); </script> </body> </html>
Pour savoir ce qu'il convient de télécharger pour utiliser jQuery et jQuery UI, il suffit de consulter les messages importants du forum qui annoncent les nouvelles versions. Exemple : http://www.developpez.net/forums/d10...13-disponible/

Citation:

Aussi je voudrais vous poser une question

d'ou provient data("dialogOpener")

De data-dialog-opener="...", jQuery enregistre automatiquement le contenu des attributs data-XYZ à partir de la version 1.4.3, mais le système à évoluer avec la version 1.6

Voir : http://api.jquery.com/data/

29/06/2011, 12h23
vladock

Ok merci et désolé pour le retard dans la reponse.

ça marche très bien , cependant j'ai une dernière petite chose à vous demander
je souhaiterais qu'a l'ouverture du popup, celui ci reste dans une une hauteur que j'aurais predefini et si le contenu depasse la hauteur un scroll s'affiche pour eviter à ceux ki on des ecrans de 800*600 d'avoir des soucis.

Merci bien à vous .