UI Dialog, mettre une condition dans "buttons"

**baggie** · 03/11/2010, 08h59

Bonjour

J'avance peu à peu sur jQuery et là je me retrouve face à un problème.
J'ai un calendrier (full calendar) dans lequel j'affiche des évènements.
Lorsque l'on clique sur ces évènements, une fenêtre dialog s'ouvre.

Code :

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

1
2
3
4
5
 
<div id="FenetreQuestion" title="Que voulez-vous faire ?"> 
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    </p> 
</div>

et

Code :

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

1
2
3
4
 
eventClick: function(content, jsEvent, view) {
$( "#FenetreQuestion" ).dialog( "option", "title", 'Bon n°'+content.title );
$( "#FenetreQuestion" ).dialog( "open" );

La dialog affiche deux boutons différents : un pour faire une action 1, l'autre pour faire une action 2.

Ce que je souhaiterai : désactiver un de ces deux boutons (action 1) suivant la classe de mon évènement.
Exemple :
- j'ai deux évènements, un rouge et un bleu.
- le bleu est validé par un administrateur donc on ne peut plus le modifier (donc action 2 possible uniquement), le rouge peut subir les deux actions.

Le code de ma dialog :

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
 
$( "#FenetreQuestion" ).dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:140,
modal: true,
buttons: {
	"Action 1": function() {
	// On appelle la page php pour faire action 1
	$.ajax({
		type: 'GET',
		data: 'id='+document.getElementById('idbon').value,
		url: 'action.php',
		success: function(html) {
			alert('Bon déplanifié !'); 
			}
		});
 
	$( this ).dialog( "close" );
},
"Action 2": function() {
 
	// Ouvrir une autre dialog ou une modal box
		});

Donc je ne vois pas bien comment faire, s'il est possible de mettre un if dans "buttons" par exemple.
J'espère que tout ça est compréhensible et que vous pourrez m'aider !

Et petite question en plus : est-il possible d'ouvrir une modal box ou dialog par dessus une autre dialog ? (action 2)

Merci

**danielhagnoul** · 03/11/2010, 23h25

Bonsoir

On peut cacher un bouton et l'on peut ouvrir un dialogue modal à partir d'un dialogue modal. Voici un exemple simple qui reste à appliquer à votre cas particulier.

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.6.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#dialog1, #dialog2 {
			display:none;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<button id="btn1">Action 1 cacher</button> <button id="btn2">Action 1 visible</button>
	</div>
	<div id="dialog1" title="Basic dialog">
		<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
	</div>
	<div id="dialog2" title="Basic dialog">
		<p>Bon déplanifié !</p>
	</div>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script>
		$(function(){
			$("#dialog2").dialog({
				autoOpen: false,
				modal: true
			});
 
			$("#dialog1").dialog({
				autoOpen: false,
				modal: true,
				buttons: {
					"Action 1": function(){
						$("#dialog2").dialog("open");
					},
					"Action 2": function(){
						alert("Hello !");
					}
				}
			});
 
			$("#btn1").click(function(){
				$("#dialog1").parent().find("div.ui-dialog-buttonset").children("button").eq(0).css("visibility","hidden");
 
				$("#dialog1").dialog("open");
			});
 
			$("#btn2").click(function(){
				$("#dialog1").parent().find("div.ui-dialog-buttonset").children("button").eq(0).css("visibility","visible");
 
				$("#dialog1").dialog("open");
			});
		});
	</script>
</body>  
</html>

**baggie** · 04/11/2010, 11h09

Merci bien pour cette réponse explicite.

Cependant, n'ayant pas de bouton mais uniquement des évènements sur lesquels je clique, je n'arrive pas à mettre en place ce code.

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
 
$("#FenetreQuestion1").dialog({
	autoOpen: false,
	resizable: false,
	draggable: false,
	buttons: {
		"Déplanifier": function(){
		$("#FenetreQuestion1").dialog("open");
		},
		"Quitter": function(){
		$("#FenetreQuestion1").close();
		}
	}
});
 
$('#calendar').fullCalendar({
	 eventClick: function(content, jsEvent, view) {
	$.ajax({
		type: 'GET',
		data: 'id='+content.id,
		url: 'open-dialog.php?id='+content.id,
		success: function(html) {
		if (html == String.fromCharCode(34)+"1"+String.fromCharCode(34))
		{	
	$("#FenetreQuestion1").parent().find("div.ui-dialog-buttonset").children("button").eq(0).css("visibility","hidden");
		}
		else if(html == String.fromCharCode(34)+"0"+String.fromCharCode(34)) 
		{
	$("#FenetreQuestion1").parent().find("div.ui-dialog-buttonset").children("button").eq(0).css("visibility","visible");					}
}
});
$("#FenetreQuestion1").dialog("open");

Et mon div :

Code :

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

1
2
3
4
 
<div id="FenetreQuestion1" title="Que voulez-vous faire ?" style="display:none;"> 
     <p>du blabla</p> 
</div>

Et ce qui me pose problème est cette ligne :

Code :

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

$("#FenetreQuestion1").parent().find("div.ui-dialog-buttonset").children("button").eq(0).css("visibility","visible");

Je ne sais pas par quoi remplacer les valeurs :/

Par contre, j'ai fait un autre code. Le seul problème est le fait de devoir cacher mes "FenetreQuestion" au départ dans ma page, et de les afficher ensuite sur le clic. Et ça ne fonctionne pas, le clic ne se déclenche pas (enfin l'ouverture de la modal).

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
 
$( "#FenetreQuestion0" ).dialog({
	autoOpen: false,
	resizable: false,
	draggable: false,
	//	height:140,
	modal: true,
	buttons: { 	"Déplanifier le bon": function() {
		// On appelle la page php
		$.ajax({
		type: 'GET',
		data: 'id='+document.getElementById('idbon').value,
		url: 'deplanifier.php?id='+document.getElementById('idbon').value,
		success: function(html) {
			alert('Bon déplanifié !'); 
			}
		});
		$( this ).dialog( "close" );
		},
		"Quitter": function() {
			$( this ).dialog( "close" );
		}
	},
});
// Dans le #calendar
eventClick: function(content, jsEvent, view) {
		$.ajax({
		type: 'GET',
		data: 'id='+content.id,
		url: 'open-dialog.php?id='+content.id,
		success: function(html) {
		if (html == String.fromCharCode(34)+"1"+String.fromCharCode(34))
		{	
	$( "#FenetreQuestion1" ).dialog( "option", "title", 'Bon n°'+content.title );
	$( "#FenetreQuestion1" ).dialog( "open" );
		}
		else if(html == String.fromCharCode(34)+"0"+String.fromCharCode(34)) 
		{
		$( "#FenetreQuestion0" ).dialog( "option", "title", 'Bon n°'+content.title );
		$( "#FenetreQuestion0" ).dialog( "open" );
		}
	}
});

J'ai testé en faisant des visibility ou des display mais rien à faire.

UI Dialog, mettre une condition dans "buttons"

jQuery

Discussions similaires

Partager

Partager