chargement dynamique données dans form.Select

**okilele** · 17/11/2010, 21h54

dojo 1.4

Bonjour, j'ai créé une fonction "ajoutPane()"qui est déclenchée par un bouton. Ell a pour but l'ajout d'un "ContentPane" dans un Accordeon. A ce ContentPane j'ajoute un "div" avec une image et deux form.Select
"abcSlt" et "pcentSlt". "pcentSlt" est chargé de façon statique donc pas de problème mais j'aimerais charger "abcSlt" de façon dynamique. Donc j'ai renseigné url pour le chargement et j'utilise l'attribut store, mais à l'exécution de la fonction les éléments (widgets et div et image) sont bien affichés dans le pane mais je n'ai rien dans le form.select "abcSlt". J'imagine qu'il y a problème de "parse" mais je ne comprend pas bien le phénomène si quelqu'un à la solution et l'explication merci de m'en faire part. Mes question pourquoi mon form.select n'est pas chargé ? Faut il utiliser un dojox.layout.ContentPane. Qu'ai je oublié de faire ?

merci

mon 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 function ajoutPane() {
        	var ac = dijit.byId('actarifAchCtrl');
        	var apn = new dijit.layout.ContentPane({
		title     : "Trait. tarif",		
        	id	  : "cp2ctrl",
        	name   : "cp2ctrl",
        	style    : "background : #c2d8ed;"});
        	ac.addChild(apn);
 
        	//créer span pour tooltip
            var divTtp = document.createElement("div");
            divTtp.id="divTtp";
            divTtp.jsId="divTtp";
            divTtp.style.marginTop="30px";
            divTtp.style.marginBottom="30px";
            divTtp.className="centrage";
            divTtp.innerHTML = "<img src='images/_info.png'></img>";
            apn.attr('content', divTtp);
 
            var abcStore = new dojo.data.ItemFileReadStore({
                url: "tarifAch/listecodeClassement.php?codsoc="+dijit.byId('codsoc').value});
 
            var abcSlt = new dijit.form.Select ({
                name     : 'abcSlt',
                id       : 'abcSlt',
                style    : 'width: 100px; height:20px;',
                store    :  abcStore,
                value    :  "",
                onChange : function(){reafficheGrid(this.value, dijit.byId("pcentSlt").attr(value))}
                });     
 
           var pcentSlt = new dijit.form.Select({
                name     : 'pcentSlt',
                id          : 'pcentSlt',
                style      : 'width: 100px; height:20px;',
                onChange : function(){reafficheGrid(this.value, dijit.byId("abcSlt").attr(value))},
                options: [{
                    label: '> 20%',
                    value: '20'
                },{
                    label: '> 15%  ~  20%',
                    value: '15'
                }]});
 
 
apn.domNode.appendChild(abcSlt.domNode);
dojo.create('label', {'for':'abcSlt', 'innerHTML': 'Class. ABC'}, abcSlt.domNode, 'before');  
apn.domNode.appendChild(pcentSlt.domNode);
dojo.create('label', {'for':'pcentSlt', 'innerHTML': 'Sélection %'}, pcentSlt.domNode, 'before');
 
}

**Daniel_Gibot** · 23/11/2010, 16h43

Pour charger un select dynamiquement je fais de cette facon :

Code :

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

1
2
3
4
5
 
var store = new dojo.data.ItemFileReadStore({
		url: "./stores/valeursSelect.php"
});
dijit.byId("monSelect").attr('store',store);

J'ajoute ce code après avoir créé mon select de la même façon que celle que tu donnes.
Toutefois, je n'ai pas essayé dans un dijit.layout.ContentPane. Mais cela ne m'étonnerait pas que cela ne fonctionne pas. Le dijit ne permet pas l'exécution de scripts contrairement au dojox.

**okilele** · 25/11/2010, 22h16

Bonjour et merci pour la réponse ça fonctionne parfaitement. Mais je rencontre un autre problème. Après le chargement des options du form.Select le onChange est exécuté. Ce qui me pose problème dans la logique du reste de mon script. J'ai tenté plusieurs action sans succès.
J'ai pensé qu'en attachant le store comme tu me l'a indiqué

Code :

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

1
2
3
4
5
6
7
8
9
 
 
var abcSlt = new dijit.form.Select ({
                name     : 'abcSlt',
                id       : 'abcSlt',
                style    : 'width: 100px; height:20px;'
                });     
 
dijit.byId("abcSlt").attr("store", objStore);

puis en utilisant un dojo.connect jpour le onChange

Code :

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

1
2
3
4
 
dojo.connect(abcSlt, "onChange", function() {
            	reafficheGrid(dijit.byId("pcentSlt").attr("value"), this.value)
            });

ça irait mieux mais rien y fait. Le onChange est exécuté par le seul fait du chargement des options dans le form.Select.
Si quelqu'un a une idée pour empêcher l'exécution du onChange je suis intéressé.
Sauf erreur je n'ai pas l'impression que l'on a ce comportement quand on utilisel les balises à confirmer.

merci

**Daniel_Gibot** · 26/11/2010, 09h49

Bonjour,

Je pense qu'en créant la connexion onChange sur le select après le chargement du store ca ne le fera plus.

**okilele** · 26/11/2010, 16h13

Envoyé par Daniel_Gibot

Bonjour,

Je pense qu'en créant la connexion onChange sur le select après le chargement du store ca ne le fera plus.

Bonjour peux tu m'indiquer comment m'y prendre car compte tenu de mon code je pensais faire les choses dans cette ordre.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var abcSlt = new dijit.form.Select ({
                name     : 'abcSlt',
                id       : 'abcSlt',
                style    : 'width: 100px; height:20px;'
                });     
 
dijit.byId("abcSlt").attr("store", objStore);
 
dojo.connect(abcSlt, "onChange", function() {
            	reafficheGrid(dijit.byId("pcentSlt").attr("value"), this.value)
            });

Est ce que le

Code :

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

1
2
 
dijit.byId("abcSlt").attr("store", objStore);

ne charge pas le form.Select comme il faut, ou faut il le forcer ? Y a t'il une autre méthode ?
merci de m'éclairer car c'est bloquant pour la suite de mon dev.
J'imagine que je ne suis pas le seul qui ait rencontré ce problème plutôt génant.
Merci

**Daniel_Gibot** · 30/11/2010, 09h57

Bonjour,

Est ce que ton select affiche un blanc au chargement ou une valeur ?
Explication :
Contrairement a un combobox, la premiere ligne (<option>) est affiché immédiatement au chargement. Du coup, si la première ligne chargée diffère de la précédente c'est considéré comme un changement.
Solution :
Rajouter un blanc. Ou alors détruire l'event "onchange" avant de recharger le store puis le recréer.