JQuery UI Dialog

**RobertP** · 14/11/2011, 21h42

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

**danielhagnoul** · 14/11/2011, 23h22

Bonsoir

API UI Dialog : http://jqueryui.com/demos/dialog/#modal-confirmation, voir le code (View Source)

**RobertP** · 15/11/2011, 09h43

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

**gtraxx** · 15/11/2011, 10h28

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 :

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
 
$('.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');
				}
			}
		});
	 });

**RobertP** · 15/11/2011, 15h30

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 :

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

**gtraxx** · 16/11/2011, 10h13

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

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
 
$('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 :

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
 
$('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 :

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

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.

JQuery UI Dialog

jQuery

Vue hybride

Discussions similaires

Partager

Partager