récupération de variable dans jquery [Résolu]

vladock · 22/06/2011, 17h51

voici mon code html

Code html :

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

Bovino · 22/06/2011, 19h06

Un id doit être unique dans le document !

vladock · 22/06/2011, 19h31

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

Bovino · 22/06/2011, 19h41

Par exemple changer les id en classes :

Code html :

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

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

Code :

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

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 :

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

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

???

vladock · 22/06/2011, 19h52

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

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

vladock · 22/06/2011, 19h57

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

danielhagnoul · 23/06/2011, 02h07

Bonsoir

Code :

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

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 :

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

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

vladock · 23/06/2011, 11h12

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 :

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
<!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")

danielhagnoul · 24/06/2011, 22h31

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

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

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
<!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/

vladock · 29/06/2011, 12h23

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 .

22/06/2011, 19h06	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Un id doit être unique dans le document ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

22/06/2011, 19h31	#3
vladock Membre du Club Inscription : août 2006 Messages : 103 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2006 Messages : 103 Points : 57 Points : 57	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
	00

22/06/2011, 19h57	#6
vladock Membre du Club Inscription : août 2006 Messages : 103 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2006 Messages : 103 Points : 57 Points : 57	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
	00

29/06/2011, 12h23	#10
vladock Membre du Club Inscription : août 2006 Messages : 103 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2006 Messages : 103 Points : 57 Points : 57	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 .
	00

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