passage de paramètre

**Darkcristal** · 25/07/2009, 10h00

Bonjour,

j'aimerai passer des paramètres à une dialog de jquery ui.

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
	// Dialog			
	$('#dialog').dialog({
		modal: true,
		resizable: false,
		autoOpen: false,
		width: 400,
		buttons: {
			"Ok": function() { 
				supprimer(id);
				$(this).dialog("close"); 
			}, 
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
 
	// Dialog Link
	$('#dialog_link').click(function(){
		$('#dialog').dialog('open');
		return false;
	});

Code :

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

1
2
3
4
5
<div id="dialog" title="Supprimer un cadeau">
	<p>Etes-vous sur de vouloir supprimer ce cadeau de votre liste ?</p>
</div>
 
<a href="#" id="dialog_link" class="">Open Dialog</a>

Par exemple pour effectuer une suppression je voudrais passer l'id à la méthode buttons OK : supprimer(id);

Je n'ai pas trouver de solution sur Internet... est ce que quelqu'un à une idée ?

Merci

**danielhagnoul** · 25/07/2009, 11h47

Bonjour Darkcristal.

Je ne vois pas d'autre solution que passer par une variable externe :

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var idToDelete = undefined;
 
            function supprimer(id){
                $("#"+id).css("display","none");
            }
 
            $('#dialog').dialog(
                {
                    modal: true,
                    resizable: false,
                    autoOpen: false,
                    width: 400,
                    buttons: {
                        "Ok": function() {
                            if (typeof idToDelete != "undefined") {
                                supprimer(idToDelete);
                            }
 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        }
                    }
                }
            );
 
            $("#dialog_link").click(function(){
                idToDelete = "dialog_link";
                $("#dialog").dialog("open");
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
 
        <div id="dialog" title="Supprimer un cadeau">
            <p>Etes-vous sur de vouloir supprimer ce cadeau de votre liste ?</p>
        </div>
 
        <a href="#" id="dialog_link" class="">Open Dialog</a>    
 
    </div>
</body>
</html>

Les seuls paramètres admis sont event et ui :

Code :

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

1
2
3
4
 
 "Ok": function(event, ui) {
    ... 
},

EDIT : correction :

Code :

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

1
2
3
4
5
 
function supprimer(id){
    $("#"+id).css("display","none");
    idToDelete = undefined;
}

**Darkcristal** · 26/07/2009, 00h30

Pour ceux que ca interesse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
	var aDialog = $(':regex(id,^popupSupprimer)');
	$(':regex(id,^popupSupprimer)').each(function(){ 
		var id = $(this).attr("id").substr(14, $(this).attr("id").length);
		$(function(){ 
			$('#popupSupprimer'+id).click(function(){ 
				$('#dialog').data('id_objet', id); 
				$('#dialog').dialog('open'); 
				return false; 
			}); 
		});
	});
</script>

Je récupere tous mes id de lien qui doivent ouvrir une popup du style "popupSupprimerXXX" ou XXX est un id.
Je récupere cet id et je le passe à ma dialog avec : $('#dialog').data('id_objet', id);

Ensuite dans le js je le récupère grâce à $("#dialog").data("id_objet")

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
 
$(function(){
	// Dialog			
	$('#dialog').dialog({
		modal: true,
		resizable: false,
		autoOpen: false,
		width: 400,
		buttons: {
			"Ok": function() { 
				$(this).dialog("close"); 
				confirmationSupprimer($("#dialog").data("id_objet"));
 
			}, 
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
});

Maintenant j'ai une autre question ! je voudrais personnaliser les messages et titres des popups.
Pour le titre j'ai vu l'attribut title que l'on peut modifier en js, mais pour le message je n'ai rien trouvé.... Je ne vais pas faire une popup dans la source html par message possible....

Une idée ?

**danielhagnoul** · 26/07/2009, 01h23

Bonsoir Darkcristal.

Bravo

J'avais essayé d'attacher un data à l'événement (event.data.id) sans succès, mais il ne m'est pas venu à l'idée de l'attacher directement au dialog, il faudra que je révise la documentation : http://docs.jquery.com/Core/data#namevalue

Edit 1h59 : on peut simplifier l'écriture, en reprenant mon 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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
    (function($){
        /*
        * James Padlosey : Regex Selector for jQuery.
        * http://www.jquery.info/spip.php?article91
        */
        $.expr[':'].regex = function(elem, index, match) {
            var matchParams = match[3].split(','),
            validLabels = /^(data|css):/,
            attr = {
                method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr',
                property: matchParams.shift().replace(validLabels,'')
            },
            regexFlags = 'ig',
            regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
 
            return regex.test(jQuery(elem)[attr.method](attr.property));
        }
 
        $(document).ready(function(){
            $('#dialog').dialog(
                {
                    modal: true,
                    resizable: false,
                    autoOpen: false,
                    width: 400,
                    buttons: {
                        "Ok": function(event, ui) {
                            $("#"+$(this).data('id_objet')).css("display","none");
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        }
                    }
                }
            );
        });
 
        $(window).ready(function(){
 
            //on accélére beaucoup la recherche en précisant le type, ici a
            $('a:regex(id,^popupSupprimer)').each(function(i, item){ 
                var id = item.id;
 
                $("#"+id).click(function(){ 
                    $('#dialog').data('id_objet', id).dialog('open'); 
                    return false; 
                });
            });            
 
        });
 
    })(jQuery);
    </script>
</head>
<body>
    <div id="conteneur">
 
        <div id="dialog" title="Supprimer un cadeau">
            <p>Etes-vous sur de vouloir supprimer ce cadeau de votre liste ?</p>
        </div>
 
        <a href="#" id="popupSupprimer1">Open Dialog</a>    
 
        <a href="#" id="popupSupprimer2">Open Dialog</a>    
 
    </div>
</body>
</html>

Edit 9h10 : Google popup Résultats 1 - 10 sur un total d'environ 66.500.000 pour popup (0,23 secondes) Vaste sujet, mauvaise solution, pourquoi ne pas utiliser un jQuery UI Dialog ?

**Darkcristal** · 26/07/2009, 19h46

Merci pour ces astuces de dev jquery ! je n'ai jamais travaillé avec même au boulot... uniquement prototype

**danielhagnoul** · 11/01/2010, 09h49

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code :

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