[Dojo] Ne peut pas écrire dans dijit.form.TextBox

Ne peut pas écrire dans dijit.form.TextBox

Bonjour, j'ai actuellement un problème avec un dijit.form.TextBox :

Celui ci est situé dans un dijit.TooltipDialog lui même appellé par un dijit.form.DropDownButton lui même présent dans un dijit.Dialog ! (Oui je sais c'est long !)

J'ai lu qu'on ne pouvais avoir un dijit.form.TextBox dans lequel on peut écrire s'il ne se trouvait pas dans le dijit.Dialog principal ? :calim2:

J'avoue ne pas comprendre ceci, j'ai fais des recherches sur google et sur le forum ... infructueuses.

Merci de m'avoir lu ! :aie:

Tu peux passer ton code HTML stp ?

ERE

Voici mon code

Citation:

Envoyé par emmanuel.remy

Tu peux passer ton code HTML stp ?

ERE

Bien sur, il s'agit d'une fonction qui se trouve dans un widget personnalisé

Code:

dojo.declare("organigramme.widget.service", [dijit._Widget, dijit._Contained], { ........... });

la voici :

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
105
106
107
108
109
110
111
	showService: function(evt){
 
		dirigeantStore = new dojo.data.ItemFileWriteStore({url: "admin/showDirigeant.php?idService="+this.dbid});
		personnelStore = new dojo.data.ItemFileWriteStore({url: "admin/showPersonnel.php?idService="+this.dbid});
 
                var dialogService = new dijit.Dialog({
			title:""+this.nom+"",
			style: "width:640px;height:480px;",
		}, "dijitDialog");
 
		dojo.connect(dialogService, "hide", dialogService, function(){
			dialogService.destroyRecursive();
		});
 
		dojo.connect(dojo.byId('btnHideDialog'), "onClick", dialogService, function(){
			//dialogService.hide();
			dialogService.destroyRecursive();
		});
 
		var contenu = '';
		if (booadmin == 1) {
			contenu += '<div dojoType="dijit.form.DropDownButton" style="float:right">';
			contenu += '<span>Editer</span>';
			contenu += '<div dojoType="dijit.TooltipDialog">';
			contenu += '<label for="nomService">Nom Service : </label> ';
			contenu += '<input type="text" trim="true" propercase="true" name="nomService" value="'+this.nom+'" dojoType="dijit.form.TextBox" id="frmNomService'+this.dbid+'"><br/>';
			contenu += '<label for="typeService">Type Service : </label> ';
			contenu += '<select dojoType="dijit.form.ComboBox" id="frmTypeService'+this.dbid+'" name="typeService" value="'+this.type+'">';
			contenu += '<option >...</option>';
			contenu += '<option >normal</option>';
			contenu += '<option >pole</option>';
			contenu += '</select> <br/>';
			contenu += '<label for="colorService">Couleur : </label>';
			contenu += '<div class="previewColor" id="previewColor" style="width:45px; height:15px; border: 1px solid #333; margin:1px 1px 1px 1px; background:'+this.color+';" display:inline;">'+this.color+'</div>';
			contenu += '<div dojoType="dijit.form.DropDownButton" label="..." id="frmColorService" name="colorService" dropDown=dialogColor>';
			contenu += '<div dojoType="dijit.ColorPalette" onChange="changeColor(this.value);" palette="7x10"></div>';
			// contenu += '<div dojoType="dojox.widget.ColorPicker" id="picker"></div>';
			// On peut ici changer le widget de sélection de couleur pour qqchose de plus évolué (style gimp) mais inutile dans notre cas !
			contenu += '</div>';
			contenu += '<br/> <button dojoType="dijit.form.Button" class="validate "';
			contenu += 'onClick="validateMajService(dojo.byId(\'serv'+this.dbid+'\'),dojo.byId(\'frmNomService'+this.dbid+'\').value,dojo.byId(\'frmTypeService'+this.dbid+'\').value,dojo.byId(\'previewColor\').style.background);" ';
			contenu += 'type="submit">Save</button>';
			contenu += '<button dojoType="dijit.form.Button" class="cancel" onClick="this.destroyRecursive(true)" type="submit">Cancel</button>';
			contenu += '</div>';
			contenu += '</div> <br/><br/><br/>';
			contenu +=	'<div class="listePerso">'+
							'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listeDirigeant" id="listeDirigeant" store="dirigeantStore" style="width: 550x; height: 150px;">'+
								'<thead>'+
									'<tr>'+
										'<th field="Nom" editable="true" style="text-align: center" width="auto">Nom</th>'+
										'<th field="Prenom" editable="true" style="text-align: center" width="auto">Prénom</th>'+
										'<th field="Sexe" editable="true" style="text-align: center" width="35px">Sexe</th>'+
										'<th field="Email" editable="true" style="text-align: center" width="auto">Email</th>'+
										'<th field="Telephone" editable="true" style="text-align: center" width="auto">Téléphone</th>'+
									'</tr>'+
								'</thead>'+
							'</table> '+
 
							'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listePersonnel" id="listePersonnel" store="personnelStore" style="width: 550x; height: 150px;">'+
								'<thead>'+
									'<tr>'+
										'<th field="Nom" editable="true" width="auto">Nom</th>'+
										'<th field="Prenom" editable="true" width="auto">Prénom</th>'+
										'<th field="Sexe" editable="true" width="35px">Sexe</th>'+
										'<th field="Email" editable="true" width="auto">Email</th>'+
										'<th field="Telephone" editable="true" width="auto">Téléphone</th>'+
									'</tr>'+
								'</thead>'+
							'</table> </div>'+
 
							'<button dojoType="dijit.form.Button" '+
								'class="cancel"'+
								'id="btnHideDialog"'+
								'type="submit">'+
							'Fermer</button>';
		}
		else {
			contenu +=	'<div class="listePerso">'+
					'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listeDirigeant" id="listeDirigeant" store="dirigeantStore" style="width: 550x; height: 150px;">'+
						'<thead>'+
							'<tr>'+
								'<th field="Nom" style="text-align: center" width="auto">Nom</th>'+
								'<th field="Prenom" style="text-align: center" width="auto">Prénom</th>'+
								'<th field="Sexe" style="text-align: center" width="35px">Sexe</th>'+
								'<th field="Email" style="text-align: center" width="auto">Email</th>'+
								'<th field="Telephone" style="text-align: center" width="auto">Téléphone</th>'+
							'</tr>'+
						'</thead>'+
					'</table> '+
 
					'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listePersonnel" id="listePersonnel" store="personnelStore" style="width: 550x; height: 150px;">'+
						'<thead>'+
							'<tr>'+
								'<th field="Nom" width="auto">Nom</th>'+
								'<th field="Prenom" width="auto">Prénom</th>'+
								'<th field="Sexe" width="35px">Sexe</th>'+
								'<th field="Email" width="auto">Email</th>'+
								'<th field="Telephone" width="auto">Téléphone</th>'+
							'</tr>'+
						'</thead>'+
					'</table> </div>'+
 
					'<button dojoType="dijit.form.Button" '+
						'class="cancel"'+
						'id="btnHideDialog"'+
						'type="submit">'+
					'Fermer</button>';
		}	
		dialogService.attr('Content',contenu);
		dialogService.show();
	},

Merci pour votre temps ! Si il vous faut plus d'informations, n'hésitez pas !

Solution

Citation:

J'ai lu qu'on ne pouvais avoir un dijit.form.TextBox dans lequel on peut écrire s'il ne se trouvait pas dans le dijit.Dialog principal ?

Effectivement !
J'ai regardé le code de Dialog.js et il apparait que Dojo pose un événement :

Code:

this._modalconnects.push(dojo.connect(dojo.doc.documentElement, "onkeypress", this, "_onKey"));

pour détecter les accès aux arrières-plans qui doivent être interdits. Or quand tu mets un dialog dans un autre il se prend les pieds dans le tapis car il duplique ces événements... et donc quand tu tapes une touche dans ta textbox c'est le _onKey du dialog principal qui est appelé le premier (à mon avis car c'est le premier posé) et celui-ci détecte que la touche est appelée depuis un autre "plan" que celui du dialog, et donc annule la saisie ! :aie:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 while(node){ if(node == this.domNode){ if(evt.charOrCode == dk.ESCAPE){ this.onCancel(); }else{ //ON DEVRAIT PASSER ICI MAIS CE N'EST JAMAIS LE CAS ... return; // just let it go } } node = node.parentNode; } // this key is for the disabled document window if(evt.charOrCode != dk.TAB){ // allow tabbing into the dialog for a11y dojo.stopEvent(evt); // opera won't tab to a div } ...
Mais impossible n'est pas français :mouarf: !
Donc, interceptons le onkeypress avant Dojo et annulons le, uniquement évidemment pour ta textbox:

Code:

contenu += '<input type="text" (...) name="nomService" (...) dojoType="dijit.form.TextBox" onkeypress="if (arguments.length>0) arguments[0].stopPropagation(); else window.event.cancelBubble=true;"><br/>';

:chin:

ERE

Fonctionne !

Merci emmanuel pour avoir pris le temps de me débloquer ! Mon code fonctionne à présent exactement comme je l'attendais, grâce à toi !

Bonne journée et @ + sur le forum :D