Inter-Liaison de plusieurs dijit.form.FilteringSelect

**cfried** · 10/08/2011, 15h08

Bonjour à tous et merci encore une fois de me lire et de m'aider.

Aujourd'hui je bute sur un problème assez con (comme d'hab ^^).

J'ai 4 tables MySQL d'un équipementier automobile qui sont :

Client / Véhicule / Projet / Type_Piece.

Elles sont organisées comme ceci :

Code :

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

1
2
3
4
5
client
 
Colonne	Type	Null	Défaut	Commentaires	MIME
CLIENT_ID	int(5)	Non			
CLIENT_LIB	varchar(30)	Non

Code :

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

1
2
3
4
5
6
7
8
9
10
11
projet
 
Colonne	Type	Null	Défaut	Relié à	Commentaires	MIME
PROJET_ID	int(5)	Non				
PROJET_LIB	varchar(50)	Oui	NULL			
PROJET_CODE	varchar(15)	Non				
PROJET_DATE_CREATION	timestamp	Non	CURRENT_TIMESTAMP			
PROJET_REF	varchar(40)	Oui	NULL			
PROJET_VEHICULE	int(5)	Oui	NULL	vehicule -> VEHICULE_ID		
PROJET_CDC	int(5)	Oui	NULL	cdc -> CDC_ID		
PROJET_PIECE_TYPE	int(4)	Non		type_piece -> TP_ID

Code :

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

1
2
3
4
5
type_piece
 
Colonne	Type	Null	Défaut	Commentaires	MIME
TP_ID	int(4)	Non			
TP_LIB	varchar(35)	Non

Code :

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

1
2
3
4
5
6
7
vehicule
 
Colonne	Type	Null	Défaut	Relié à	Commentaires	MIME
VEHICULE_ID	int(5)	Non				
VEHICULE_CLIENT	int(5)	Non		client -> CLIENT_ID		
VEHICULE_LIB	varchar(20)	Non				
VEHICULE_DESC	varchar(40)	Oui	NULL

Bon vous me direz ça me fait une belle jambe ! En fait OUI

Le truc c'est que j'essaie d'avoir un FilteringSelect pour chaque table mais comme ces données sont liées je voudrais que les FilteringSelect le soient aussi (logique). Un truc de ce genre j'aime bien : http://jmolline.free.fr/regions/index3.php

Le problème avec cet exemple comme ceux qui sont dans la FAQ, en plus de ne pas utiliser Dojo et la puissance de ses stores, c'est que l'utilisateur final ne peux pas, s'il connait d'avance le code projet sur lequel il veut travailler, l'indiquer directement et que les autres FilteringSelect se remplissent automatiquement. Comme si je mettais directement Doubs dans le deuxième champs de l'exemple (parmis une liste complète mais toujours pratique grâce à l'auto-complétion Dojo) et que le premier champs devienne tout seul Franche-Comté !

Vous me suivez ?

Voilà alors actuellement, j'ai un formulaire créé onfly en JS qui ressemble à ça :

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
var openNewTestRequest = function() {
	var cpTestRequest = new dijit.layout.ContentPane({});
	addTabPane(dijit.byId("tcCenter"), "New Test Request", cpTestRequest);
	var cmptCDC = 0;
	var cmptCR = 0;
	var cmptDerog = 0;
	var innerRequest = ""+
	"<div><form id='frmNewTestRequest'>"+
		"<table width='450px'>"+
			"<tr>"+
				"<td width='25%'>"+
					"Customer"+
				"</td>"+
				"<td width='75%' colspan='2'>"+
					"<div data-dojo-type='dojo.data.ItemFileWriteStore' id='customerStore' data-dojo-id='customerStore'>"+
					"</div>"+
					"<input data-dojo-type='dijit.form.FilteringSelect' data-dojo-props='store:customerStore,searchAttr:\"CLIENT_LIB\"' name='customer' data-dojo-id='customerInput' id='customerInput'/>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Car"+
				"</td>"+
				"<td colspan='2'>"+
					"<div data-dojo-type='dojo.data.ItemFileWriteStore' id='carStore' data-dojo-id='carStore'>"+
					"</div>"+
					"<input data-dojo-type='dijit.form.FilteringSelect' data-dojo-props='store:carStore,searchAttr:\"VEHICULE_LIB\"' name='car' data-dojo-id='carInput' id='carInput'/>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Product Type"+
				"</td>"+
				"<td colspan='2'>"+
					"<div data-dojo-type='dojo.data.ItemFileWriteStore' id='typeStore' data-dojo-id='typeStore'>"+
					"</div>"+
					"<input data-dojo-type='dijit.form.FilteringSelect' data-dojo-props='store:typeStore,searchAttr:\"TP_LIB\"' name='type' data-dojo-id='typeInput' id='typeInput'/>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Project"+
				"</td>"+
				"<td colspan='2'>"+
					"<div data-dojo-type='dojo.data.ItemFileWriteStore' id='projectStore' data-dojo-id='projectStore'>"+
					"</div>"+
					"<input data-dojo-type='dijit.form.FilteringSelect' data-dojo-props='store:projectStore,searchAttr:\"PROJET_CODE\"' name='project' data-dojo-id='projectInput' id='projectInput'/>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Test Stage"+
				"</td>"+
				"<td colspan='2'>"+
					"à définir !"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Product + revision // Sample"+
				"</td>"+
				"<td colspan='2'>"+
					"à définir"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Wished Time-Frame"+
				"</td>"+
				"<td colspan='2'>"+
					"<div data-dojo-type='dijit.Calendar' data-dojo-props='onChange:function(){dojo.byId(\"formatted\").innerHTML=dojo.date.locale.format(arguments[0], {formatLength: \"full\", selector:\"date\"})}'>"+
					"</div>"+
					"<p id='formatted'>"+
					"</p>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Goal"+
				"</td>"+
				"<td colspan='2'>"+
					"<div data-dojo-type='dijit.Editor'"+
			             "data-dojo-props='height:175, styleSheets:\"js/dojo/dijit/themes/claro/document.css\"'>"+
			        "</div>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Product's Destination"+
				"</td>"+
				"<td colspan='2'>"+
				    "<input type='radio' name='destination' id='radioDestTestEditor' value='destEditor' "+
				    	"data-dojo-type='dijit.form.RadioButton' data-dojo-id='radioDestTestEditor' "+
				    	"data-dojo-props='name:\"destination\", value:\"testEditor\"' />"+
				    "<label for='radioDestTestEditor'>"+
				        "Test Editor"+
				    "</label>"+
				    "<br/>"+
				    "<input type='radio' name='destination' id='radioDestRecycling' value='destRecycler' "+
				    	"data-dojo-type='dijit.form.RadioButton' data-dojo-id='radioDestRecycling' "+
				    	"data-dojo-props='name:\"destination\", value:\"destRecycler\"' />"+
				    "<label for='radioDestRecycling'>"+
				        "Recycling"+
				    "</label>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Specifications"+
				"</td>"+
				"<td colspan='2'></td>"+
			"</tr>"+
			"<tr>"+
				"<td></td>"+
				"<td>"+
					"<input id='upSpec' data-dojo-id='upSpec' data-dojo-type='dojox.form.Uploader' "+
					"data-dojo-props='label:\"Upload\",name:\"upSpec\", multiple:\"true\", type:\"file\", name:\"upSpec\", url:\"modules/de/retrieveSpec.php\", uploadOnSelect:true' />"+
				"</td>"+
				"<td>"+
					"<button data-dojo-props='label:\"Clear\"'onClick='dijit.byId(\"upSpec\").reset();' data-dojo-type='dijit.form.Button'></button>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td></td>"+
				"<td colspan='2'>"+
					"<div id='filesSpec' data-dojo-id='filesSpec' data-dojo-type='dojox.form.uploader.FileList' "+
					"data-dojo-props='uploaderId:\"upSpec\"'></div><div id='cancelSpecZone'></div>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td>"+
					"Product Tracking File"+
				"</td>"+
				"<td colspan='2'></td>"+
			"</tr>"+
			"<tr>"+	
				"<td></td>"+
				"<td>"+
					"<input id='upTF' data-dojo-id='upTF' data-dojo-type='dojox.form.Uploader' "+
					"data-dojo-props='label:\"Upload\",name:\"upTF\", multiple:\"true\", type:\"file\", url:\"modules/de/retrieveTF.php\", uploadOnSelect:true' />"+
				"</td>"+
				"<td>"+
					"<button data-dojo-props='label:\"Clear\"' onClick='dijit.byId(\"upTF\").reset();' data-dojo-type='dijit.form.Button'></button>"+
				"</td>"+
			"</tr>"+
			"<tr>"+
				"<td></td>"+
				"<td colspan='2'>"+
					"<div id='trackFiles' data-dojo-id='trackFiles' data-dojo-type='dojox.form.uploader.FileList' "+
					"data-dojo-props='uploaderId:\"upTF\"'></div><div id='cancelTFZone'></div>"+		
				"</td>"+
			"</tr>"+
		"</table>"+
	"</form></div>";
	cpTestRequest.set('content',innerRequest);
	dojo.connect(dijit.byId('upSpec'),'onBegin',null, function() {
		dojo.byId('cancelSpecZone').innerHTML=""+
		"<button data-dojo-type='dijit.form.Button' "+
		"data-dojo-props='label:\"Stop\"' "+
		"data-dojo-id='btnStopUpSpec'>"+
		"<script type='dojo/event' data-dojo-event='onClick'>"+
		"alert('stop à mettre en place');"+
		"</script>"+
		"</button>";
		dojo.parser.parse('cancelSpecZone');
	});
	dojo.connect(dijit.byId('upSpec'),'onBegin',null, function() {
		dojo.byId('cancelTFZone').innerHTML=""+
		"<button data-dojo-type='dijit.form.Button' "+
		"data-dojo-props='label:\"Stop\"' "+
		"data-dojo-id='btnStopUpTF'>"+
		"<script type='dojo/event' data-dojo-event='onClick'>"+
		"alert('stop à mettre en place');"+
		"</script>"+
		"</button>";
		dojo.parser.parse('cancelTFZone');
	});
 
	/* C'est ICI que ça se corse ! On va surement se servir des ItemFileWriteStore créés plus haut mais je ne vois pas comment !*/
	dojo.xhrPost({
		url:"modules/vehicule/getAll.php",
		load: function(response) {
			// ??
		},
		error: function(error) {
			alert(error);
		}
	});
};

et une requête éxécutée en PHP grâce à pdo :

Code :

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

1
2
3
4
5
6
 
SELECT CLIENT_LIB, VEHICULE_LIB, TP_LIB, PROJET_CODE
FROM PROJET
INNER JOIN VEHICULE ON PROJET_VEHICULE = VEHICULE_ID
INNER JOIN CLIENT ON VEHICULE_CLIENT = CLIENT_ID
INNER JOIN TYPE_PIECE ON PROJET_PIECE_TYPE = TP_ID

Voilà les amis, peut être que vous avez déjà fait ça et que c'est tout con mais en regardant la FAQ je ne trouve pas mon bonheur :
http://javascript.developpez.com/faq...js#listesLiees
http://javascript.developpez.com/faq...js#SelectListe

Deux exemples qui vont dans le sens d'un exemple qui est à sens unique alors que moi je veux que ce soit dans n'importe quel sens (dégressif dans le cas d'une précision, ou trouver les données source lorsque le code de projet précis est trouvé !)

Merci d'avance pour vos conseils,

Si ce message n'était pas assez typé Dojo pour entrer dans cette section, merci de me dire où le poster !

Inter-Liaison de plusieurs dijit.form.FilteringSelect [Dojo]

Bibliothèques & Frameworks

Mode arborescent

Discussions similaires

Partager

Partager