dialog confirm oui/non

Version imprimable

28/09/2007, 13h09
mourad.zamoun

dialog confirm oui/non

peut on changer le texte OK/Cancel en OUI/NON dans la boite de dialog confirm ?

A++
28/09/2007, 13h11
SpaceFrog

non
sauf à faire soi même une boite de dialogue
28/09/2007, 13h40
mourad.zamoun

tu peux me donner un exemple ?

Un petit exemple vite fait de bidouille perso...

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
 
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <title>X</title>
   <style type="text/css">
   .titlebar{font-size:11px;
         font-family:verdana;
         color:white;
         font-weight:bold;
         width:100%;
         background-color:Darkslateblue;
         padding:2px;
         text-align:left;
         }
 
   .msgbox{border:outset 2px white;
         background-color:gainsboro;
         width:300px;
         height:180px;
         color:black;
         padding-left:1px;
         padding-right:2px;
         padding-top:1px;
         font-family: verdana;
         font-size:11px;
         text-align:center
           }
   .cross{border:outset 2px white;
         background-color:gainsboro;
         left:2px;
         width:18px;
         color:black;
          font-family:tahoma;
          float:right;
          margin-top:0px;
          padding-left:4px;
          padding-bottom:2px;
          padding-top:1px;
          top:0px;
          line-height:10px;
          cursor:default;
          }
   .bouton{width:80px;
         height:25px;
         border:oustet 2px silver;
         position:relative;
         font-size:11px;
         font-family: tahoma;
         }
 
   .innerText{width:100%;
          padding-left:30px;
          text-align:left;
          }       
 
   #testzone {position:absolute;
            top:100px;
            left:200px;
            }
   </style>
 
 <script type='text/javascript'>
   function MyAlert($texte){
 
            msg=$texte
            document.getElementById('testzonetext').innerHTML=document.getElementById('texte').value;
 
            document.getElementById('trap').value=document.getElementById('bouton').value;
            document.getElementById('menutitre').innerHTML=document.getElementById('titre').value
 
            document.getElementById('testzone').style.display='block';
            }      
 
    </script>
</head>
<body>
Titre        <input type="text" id='titre' size="20" maxlength="40" />
Texte        <input type="text" id='texte' size="20" maxlength="40" />
Bouton			<input type="text" id='bouton' size="20" maxlength="40" />
 
			  <input type="button" onclick="MyAlert();"	  value="alerte"/>       
 
 
		<div id='testzone' class="msgbox" style="display:none;" >
				<div class="titlebar" >
					<div id='menutitre' style="float:left"></div>	
				  	<div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div>
 				</div>
 
				<br/>
				<br/>
				<br/>
				<div class='innerText' id='testzonetext'>	</div>
				<br/>
				<br/>
				<br/>
				<div>
					<input type="button" id="trap" value="OK" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/><br/>
				</div>
 
		</div>
</body>
</html>

Sinon tu peux passer par une librairie de type window prototype

28/09/2007, 14h26
mourad.zamoun

ya des inconveniants:
-tu ne peux pas la faire bouger
-le focus n'est pas fixé sur elle
-on est obligé de traimballer ce gros code dans toutes les pages qui font appel a cette fonction !

et c'est quoi l'autre solution window prototype ?

merci en tout cas pour cette reponse :)

A+
28/09/2007, 14h31
SpaceFrog

oui dans cet exemple succint la dialogbox est fixe...mais tous les poitn cotés peuvent se coder ... ça va encore augmenter la taille du code
Le code restera toujours moins important que celui d'une libraire complète comme window prototype :

http://prototype-window.xilinus.com/
28/09/2007, 16h51
mourad.zamoun

j'ai du mal a l'utiliser
ca marche pas chez moi !!
et pourtant j'ai fait un copier/collé de leur exemples !!??

A+
28/09/2007, 16h52
SpaceFrog

tu as téléchargé libraire ?
28/09/2007, 17h58
mourad.zamoun

oui les deux : prototype et window
01/10/2007, 16h27
badoress

salut,
est ce que vous avez reussi à mettre ca en oeuvre càd changer le texte OK/Cancel en OUI/NON dans la boite de dialog confirm
Merci
01/10/2007, 16h41
mourad.zamoun

malheiteusement, NON !!

si tu as des idées nouvelles, je n'attend que ça ;)

A++
01/10/2007, 16h59
SpaceFrog

Dasn la doc c'est tout bien expliqué !

confirm(content, options)
ou alert ou infio
et dans les options :

okLabel Ok Ok button label
cancelLabel Cancel Cancel button label
01/10/2007, 17h16
mourad.zamoun

j'ai appliqué la doc comme il le faut puisque j'ai pris un exemple avec copier/collé !

le probleme est que ca ne fonctionne pas correctement chez moi !

la boite de dialog se casse en plusieurs morceaux et s'affiche a l'interieur de la page !!??

A++
01/10/2007, 17h18
SpaceFrog

tu as copié quel exemple ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="prototype.js"> </script>
<script type="text/javascript" src="window.js"> </script>
<link href="style.css" rel="stylesheet" type="text/css"/>
 
<style> #myDialogId .myButtonClass { padding:3px; font-size:20px; width:100px; } #myDialogId .ok_button { color:#2F2; } #myDialogId .cancel_button { color:#F88; } </style>
 
 
<script>
function clik(){
w = Dialog.confirm("mon texte", 
               {width:300, okLabel: "OUI", cancelLabel: "NON",
               id: "myDialogId",
               cancel:function(win) {return false;},
               ok:function(win) {return true;}
              });
}
</script>
 
<input type="button" value="confirm" 
onclick="clik()" 
>

04/10/2007, 15h42
badoress

bonjour,

moi aussi j'ai appliqué la doc comme il le faut. mais mon problème c'est que si je clik sur l'un des bouttons on me génére l'erreur suivante:
debug is not defined

quand j'ai enlevé le debug dans la fonction function(win) je voi tres bien la boite confirm avec le style et tout mais sans utilité :cry: càd le test ne passe pas si je clik sur les bouttons
04/10/2007, 17h37
badoress

pour le problème de debug is not defined j'ai ajouter le fichier debug.js et ça resoud le problème mais tjr j'arrrive pas à reussir mes test càd le dialog.confirm ne me retourn rien

voici la fonction que j'execute lors d'un clik sur une image :

if(! Dialog.confirm("est ce que vous etes sure",
{width:300, okLabel: "oui",
width:300, cancelLabel: "non",
buttonClass: "buttons",
cancel:function(win){debug("cancel confirm panel");} ,
ok:function(win) {debug("cancel confirm panel"); return true;}
})
)
{
alert('success');
}
}

je voi bien la boite de confirm mais j'arrive pas à voir l'alert c'est etonant 8O càd que le test ne passe pas ???

le probleme est résolu ; mais d'une autre manière:

le code de ma popupOuiNon.html :

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Confirmation</title>
<style type="text/css">
.bouton{width:80px;
                 height:25px;
                 border:oustet 2px silver;
                 position:relative;
                 font-size:11px;
                 font-family: tahoma;
                 }
                 
</style>
 
<script type="text/javascript">
var gobjXDocument = null;
 
function oui(){
        window.returnValue = true;
        window.close();
}
function non(){
        window.returnValue=false;
        window.close();
} 
 
function afficheQuestion(){
        gobjXDocument = window.dialogArguments; 
        document.getElementById("question").innerHTML = gobjXDocument ; 
}
 
</script>
</head>
 
<body>
 
<form id="f0">
 
<center>
		<h3>
		<div id="question" > </div>
		</h3>
 
	<input type="button" value="OUI" onclick="oui()" class="bouton" style="left:0px;"/>
 
	<input type="button" value="NON" onclick="non()" class="bouton" style="left:5px;"/>
 
</center>
 
</form>
 
<script>
afficheQuestion();
</script>
 
</body>
 
</html>

-------------

le code de l'utilisation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
var resultConfirm=false;
function confimUse(obj, question) {
        document.getElementById("resultConfirm").innerHTML = "";
        var question = "my question ?";
        var result = window.showModalDialog("file:///P:/data/js/popupOuiNon.html", question, "status:no;help:no;scrollbars:yes;dialogHeight:200px;hotkeys:no;dialogWidth:400px;location:no;menubar:no;toolbar:no;screenX:100;screenY:50");
        document.getElementById("resultConfirm").innerHTML = result;
}
</script>
 
<form id="f0">
 
<input type="button" value="click" onclick="confimUse(this.form.resultConfirm, 'my question?')" />
 
<div id="resultConfirm"> </div>
 
</form>

Mourad :)

10/10/2007, 18h36
badoress

tu peux maintenant résoudre ton problème tres simplement 8-) just avec le Dialog.cofirm de la lib prototype window.tu peux te referer à cette discussion http://www.developpez.net/forums/sho...d.php?t=421853

Essais ceci, ca fonctionne très bien pour moi.

mets ce code dans: monfichier.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
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
 
<SCRIPT LANGUAGE="JavaScript">
<!--
IE4 = document.all;
function newAlert(title,mess,icon,mods) {
   (IE4) ? makeMsgBox(title,mess,icons,0,0,mods) : alert(mess);
}
 
function newConfirm(title,mess,icon,defbut,mods) {
   if (IE4) {
      icon = (icon==0) ? 0 : 2;
      defbut = (defbut==0) ? 0 : 1;
      retVal = makeMsgBox(title,mess,icon,4,defbut,mods);
      retVal = (retVal==6);
   }
   else {
      retVal = confirm(mess);
   }
   return retVal;
}
 
function newPrompt(title,mess,def) {
   retVal = (IE4) ? makeInputBox(title,mess,def) : prompt(mess,def);
   return retVal;
}
 
function IEBox(title,mess,icon,buts,defbut,mods) {
   retVal = (IE4) ? makeMsgBox(title,mess,icon,buts,defbut,mods) : null;
   return retVal;
}
//-->
</SCRIPT>
 
<SCRIPT LANGUAGE="VBScript">
<!--
Function makeMsgBox(title,mess,icon,buts,defbut,mods)
   butVal = buts + (icon*16) + (defbut*256) + (mods*4096)
   makeMsgBox = MsgBox(mess,butVal,title)
End Function
 
Function makeInputBox(title,pr,def)
   makeInputBox = InputBox(pr,title,def)
End Function
-->
</SCRIPT>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
function ConfirmOuiNon(Titre, Question)
{
	var Titre, Question;
		myIntegerVariable = IEBox
		(
			Titre,
		    Question,
		    2,4,1,0)
 
			switch (myIntegerVariable) {
		 		case 6: // 'Yes'
		  	    	// statements to execute if Yes pressed
		      	return 1;
		      	break;
		 	  	case 7: // 'No'
		      		// statements to execute if No pressed
		      	return 0;
		      	break;
		}
}
//-->
</SCRIPT>

Ensuite tu apelle la fonction comme ceci sur un évènement

Code:

1
2
3
4
5
6
7
8
9
10
11
 
            fucntion mafonction()
            {
                var QuestionTexte;
		QuestionTexte = 'Etes-vous certain de vouloir Oui/Non?';
 
		if (ConfirmOuiNon('Question?', QuestionTexte))
		{
		     Code a exécuter si oui
		}
            }