UI Dialog, mettre une condition dans "buttons"

Version imprimable

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:

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:

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:

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 :D

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:

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>

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:

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:

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:

$("#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:

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.