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.

14/11/2011, 21h42	#1
RobertP Invité de passage Inscription : décembre 2006 Messages : 37 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : décembre 2006 Messages : 37 Points : 2 Points : 2	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
	00

14/11/2011, 23h22	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir API UI Dialog : http://jqueryui.com/demos/dialog/#modal-confirmation, voir le code (View Source) __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

15/11/2011, 09h43	#3
RobertP Invité de passage Inscription : décembre 2006 Messages : 37 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : décembre 2006 Messages : 37 Points : 2 Points : 2	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
	00

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