JQuery UI Dialog

Version imprimable

14/11/2011, 21h42
RobertP

JQuery UI Dialog

Bonjour,

Je me mets tout doucement à JQuery UI pour les "modal box", mais je ne maitrise rien pour l'instant, j'arrive bien à afficher un message de confirmation pour savoir si un utilisateur veut supprimer (ou non) un élément d'une page, mais je n'arrive pas à y attribuer une action sur le "OUI"...

J'ai donc 2 questions :

- Comment afficher dans la boite de dialogue un message du style "Etes vous sûr de supprimer le personnage RobertP ? OUI NON",
- Comment rediriger l'action "OUI" en POST vers une page et récupérer les variables associés ?

Merci d'avance pour votre aide...

RP
14/11/2011, 23h22
danielhagnoul

Bonsoir

API UI Dialog : http://jqueryui.com/demos/dialog/#modal-confirmation, voir le code (View Source)
15/11/2011, 09h43
RobertP

Bonjour,

Merci pour ta réponse, j'ai bien regardé la documentation officielle, mais je n'arrive pas à personnaliser la boîte de dialogue du genre "Voulez vous supprimer le personnage RobertP ?" et ensuite sur le bouton "Supprimer", je ne vois pas comment renvoyer vers une page PHP qui va traiter les données.

Peux tu m'aiguiller ?

Par avance merci

il faut juste le lien qui exécute la suppression et le placer dans une requête ajax.
Voici un petit exemple en dur pour réaliser sa, il existe d'autre méthode mais c'est la plus simple.

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
 
$('.masuppression').live("click",function (event){
		event.preventDefault();
		var id = $(this).attr("href");
		$("#dialog").dialog({
			resizable: false,
			height:180,
			width:300,
			modal: true,
			title: 'Supprimé cette page ?',
			buttons: {
				'Confirm': function() {
					$(this).dialog('close');
					$.ajax({
						type:'get',
						url: "monurl"+id,
						success:function(e){}
				     });
					return false;
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
	 });

Merci pour ton message, je préfére poster mon code complet car ça ne fonctionne pas... je dois passer à côté de quelque chose...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Test</title>
 </head>
 <body>
	<link rel="stylesheet" href="../css/custome-theme/jquery-ui-1.7.3.custom.css" type="text/css" media="screen" />
	<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.7.3.custom.min.js"></script>
 <script>
	$('a.masuppression').live("click",function (event){
		event.preventDefault();
		var id = $(this).attr("href");
		$("#dialog").dialog({
			resizable: false,
			height:180,
			width:300,
			modal: true,
			autoOpen:false,
			title: 'Supprimer ce personnage ?',
			buttons: {
				'Confirm': function() {
					$(this).dialog('close');
					$.ajax({
						type:'get',
						url: "test.php"+id,
						success:function(e){}
				     });
					return false;
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
	 });
	</script>
 
<?php if(isset($_GET['id'])){ print("ID -> ".$_GET['id']);} ?>
 
<div id="dialog">
	<p><span class="ui-icon ui-icon-alert">Attention</span> : Voulez vous supprimer cet element?</p>
</div>
<div class="rien">
<ul>
	<li>Personnage 1 : Bob (<a class="masuppression" href="">supprimer</a>)</li>
	<li>Personnage 2 : Bill (<a class="masuppression" href="">supprimer</a>)</li>
	<li>Personnage 3 : Tom (<a class="masuppression" href="">supprimer</a>)</li>
	<li>Personnage 4 : Mitch (<a class="masuppression" href="">supprimer</a>)</li>
</ul>
</div>

Le but de mon code par la suite est d'afficher mes personnages et de donner la possibilité de les supprimer avec une fenetre disant : "Voulez vous supprimer le personnage Bill ?" et ensuite rediriger selon le personnage choisit vers la page de suppression, si possible en methode POST (sécurité).

Merci ;)

Ben pour la méthode post rien de plus simple :

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
 
$('a.masuppression').live("click",function (event){
		event.preventDefault();
		var id = $(this).attr("href");
		$("#dialog").dialog({
			resizable: false,
			height:180,
			width:300,
			modal: true,
			autoOpen:false,
			title: 'Supprimer ce personnage ?',
			buttons: {
				'Confirm': function() {
					$(this).dialog('close');
					$.ajax({
						type:'post',
						url: "test.php"+id,
						success:function(e){}
				     });
					return false;
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
	 });

Mais votre href est vide alors vous pouvez plutôt utiliser l'attribut rel :
JS

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
 
$('a.masuppression').live("click",function (event){
		event.preventDefault();
		var id = $(this).attr("rel");
		$("#dialog").dialog({
			resizable: false,
			height:180,
			width:300,
			modal: true,
			autoOpen:false,
			title: 'Supprimer ce personnage ?',
			buttons: {
				'Confirm': function() {
					$(this).dialog('close');
					$.ajax({
						type:'post',
						url: "test.php"+id,
						success:function(e){}
				     });
					return false;
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
	 });

HTML

Code:

1
2
3
4
5
6
7
 
<ul>
	<li>Personnage 1 : Bob (<a class="masuppression" href="#" rel="">supprimer</a>)</li>
	<li>Personnage 2 : Bill (<a class="masuppression" href="#" rel="">supprimer</a>)</li>
	<li>Personnage 3 : Tom (<a class="masuppression" href="#" rel="">supprimer</a>)</li>
	<li>Personnage 4 : Mitch (<a class="masuppression" href="#" rel="">supprimer</a>)</li>
</ul>

N'oubliez pas de changer votre méthode en POST dans votre script php et de récupérer les ID dans les rel correspondant.