ComboBox avec Dojo

**heyrelec** · 09/01/2012, 10h08

Bonjour,

J'ai quelques problèmes avec les ComboBox et Dojo.
J'ai un ComboBox qui contient les codes postaux de France.
J'ai un second ComboBox qui contient les ville de France.

Actuellement, les 2 ComboBox affichent tout. Du coup, comme il y a 30000 villes (voir plus) c'est assez lent.

Ce que je voudrais c'est que lorsque l'opérateur saisie son code postal, je fais une requête sur une base pour affiche les villes possibles avec ce CP.

Idéalment, il faudrait :
- Test si ComboBox des CP change -> OnChange (c'est ok)
- Reset ComboBox des Villes -> Je n'arrive pas à le faire
- Mettre à jour avec les nouvelles villes -> Je ne sais pas comment faire.

Bref, beaucoup de problème.

Si quelqu'un à la solution je lui en suis très reconnaissant.

Merci pour votre aide.

@+

LGN

**emmanuel.remy** · 09/01/2012, 10h47

Salut,

Une solution efficace est de reconstruire la combo des villes si tu changes de code postal. De toute façon cela équivaudra souvent à faire ça: nouvelle requête AJAX vers le server et alimentation ou re-création de la combo des villes.Néanmoins il y a peut-être plus fin.

Quelle version de dojo utilises tu et quel type de store ?

ERE

**heyrelec** · 09/01/2012, 11h32

Bonjour,

Aujourd'hui le code HTML pour le ComboBox Ville est :

Code html :

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

1
2
3
<select dojotype="dijit.form.ComboBox" name="Ville_Fac" id="Ville_Fac" style="width:200px" onchange="UpdateAdrsLivraison();">
      <?php ComboBoxBDD($GLOBALS['tblVille'], "Ville", "", "","", "DISTINCT Ville", "ORDER BY Ville ASC") ?>
    </select>

Dans sur le ComboBox des CP, j'ai mis un code (OnChange) qui fait :

Code :

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

document.getElementById('Ville').innerHTML = null;

Le but est déjà de remettre à 0 la liste des villes.

Mais ceci fonctionne très bien si j'utilise un ComboBox Standard mais dès que j'utilise un Combo Dojo, plus rien ne marche.

Du coup, je ne sais pas comment faire une reset de la liste.
Et ensuite, je ne vois pas comment remettre à jour la liste.

Merci.

LGN

**emmanuel.remy** · 09/01/2012, 16h25

Ok. Première info, tu n'utilises pas un store mais des éléments OPTION qui sont je suppose générés par ta fonction ComboBoxBDD. Seconde info tu utilises a priori une version "ancienne" de dojo, on va dire une 1.5.

En interne Dojo va utiliser des OPTION pour se créer un store à la volée.

D'après ta façon de faire, pourquoi ne pas supprimer ton élément par un :

Code :

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

diji.byId("Ville_Fac").destroy();

puis de regénérer ta balise SELECT et de faire un dojo.html.set(TON SELECT) ?

Note que la logique serait plutôt d'utiliser un store de type ItemFileReadStore et de reconstruire la combo sur chaque onChange, ou mieux encore d'utiliser un dojox.JsonRestStore (en 1.5) ce qui t'éviterait d'avoir à reconstruire la combo. Note aussi que tu devrais regarder attentivement le dojox.QueryReadStore (en 1.5) qui te permet de faire un store distant assez souple. Il y a des exemples de code, notamment celui-ci: \dojox\data\tests\QueryReadStore.html qui crée un store dynamique pour une combo...

ERE

**heyrelec** · 09/01/2012, 18h28

Bonjour,

Merci Emmanuel pour ta réponse.
En ce qui concerne le version de dojo, j'utilise la toute dernière : 1.7.

Par contre à la lecture de ton message, je fais peut-être fausse route sur la méthode que je veux mettre en place.

J'ai regardé rapidement l'exemple que tu sites.
Chez moi, il ne fonctionne pas.
Il indique plusieurs erreurs.

Bon ceci dit, il faut que je regarde plus en détail afin de comprendre comment cela fonctionne.

Je vais essayé d'approfonchir ce sujet, voir si je trouve un tuto.

Merci pour vos retours.

@+

LGN

**emmanuel.remy** · 10/01/2012, 00h07

Re,

Si tu utilises la 1.7 alors ton code n'est pas au gout du jour

On ne fait plus de dojoType="kkkk" mais on passe par des attributs data-dojo-type compatibles avec le HTML5.

Bon dans ce cas là le plus simple pour toi est d'utiliser pour ta liste des villes un controle dijit.form.Select. C'est en fait ce qui te conviendrait certainement le mieux, car il se rapproche d'une vraie combo (ce contrôle était avant dans le package dojox.form) et permet ajout et suppression d'OPTION.

Donc sur ton onChange de code postal tu peux vider la boite (removeOption) et ajouter tes villes (addOption). Note au passage que si tu préfères passer par un store en écriture, il sera synchronisé avec ta combo.

Inspire toi du code qu'il y a dans la page de test dijit/tests/form/test_Select.html il y a tout ce qu'il faut.

ERE

**heyrelec** · 11/01/2012, 14h32

Bonjour Emmanuel,

Là tu viens de me casser le moral !
J'ai acheter un livre sur dojo pour gagner du temps dans la prise en main.
Et dans ce livre ils utilisent dojoType et pas data-dojo-type.
Gloups!!

Par contre, ne serais-tu pas l'Obélix du Dojo ?
Tu es tombé dedans quand tu étais petit ?

Tu connais tout !!!

Je ne sais pas pourquoi mais les exemples ne fonctionnent pas chez moi.
Celui que tu m'as donnée ne fait rien.
Etrange.

Dans tous les cas, un grand merci pour ton aide car cela me permet de regarder des cas précis.

Merci Obélix

Nan, je rigole, Merci Emmanuel.

LGN

**emmanuel.remy** · 11/01/2012, 18h29

Re,

Pas eu le temps avant mais voilà ce que peut donner ton code: les deux combos sont liées. (note: suis parti du test dijit/tests/form/test_Select.html)

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>dijit.form.Select test</title>
 
		<style>
			@import url(../../themes/claro/document.css);
			@import url(../../themes/claro/claro.css);
			@import url(../css/dijitTests.css);
		</style>
 
		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
 
		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, parseOnLoad: true"></script>
 
		<script type="text/javascript">
			dojo.require("dojo.parser");
			dojo.require("dijit.form.Select");
 
 
			var data2 = [
					{value: "94510", label: "La Queue en Brie"},
					{value: "73300", label: "Chambery"},
					{value: "94000", label: "Créteil"},
					{value: "94200", label: "Nogent"},
					{value: "73100", label: "Saint-Martin"},
					{value: "73200", label: "Albertville"},
					{value: "73400", label: "Bourg Saint-Maurice"}
				]
			;
 
 
			dojo.ready(function(){
				dojo.connect(s1, "onChange", function(val){
					//On récupère nos données qu'on veut afficher dans la seconde combo 
          var deps = dojo.filter(data2, function(item) {
            //on prend les données qui commencent par le numéro du département (très très basique ;) )
            return item.value.indexOf(val)==0;
          });
          console.log(deps);
          //on supprime tout          
          s2.removeOption(s2.options); 
          //on met les nouvelles données ( sous la forme d'un tableau pour être plus performant)
          s2.addOption(deps); 
				});
				s1.set("value",73);
 
			});
		</script>
	</head>
	<body class="claro">
<label for="s1">Départements: </label>
			<select id="s1" data-dojo-id="s1" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s1" ' style="width:150px">
				<option value="94">Val de Marne</option>
				<option value="73" >Savoie</option>
			</select>
			<label for="s2">Villes </label>
			<select id="s2" data-dojo-id="s2" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s2", value:"CA"' style="width:150px">
			</select>
	</body>
</html>

Si tu veux tester, j'ai fait un jsFiddle ici.

ERE

**heyrelec** · 20/01/2012, 11h05

Bonjour,

Après un petit déplacement, me voici de retour sur mon projet.

Merci Emmanuel, ton exemple fonctionne très bien.
Par contre, il a mis en évidence un problème dans la mécanique.
Si une ville n'existe pas, il n'est pas possible d'en ajouter une.
Le champ n'est pas éditable donc on est coincé.

Sais-tu s'il est possible de rendre ce champ éditable comme les ComboBox ?
Ainsi l'opérateur a accès à la liste mais il peut rajouter une ville si nécessaire.

Merci.

LGN

**emmanuel.remy** · 20/01/2012, 13h49

Salut,

Non ce n'est pas possible ainsi

Dans ce cas il te faudrait plutôt utiliser un dijit.form.FilteringSelect avec un store en écriture, dojo.data.ItemFileWriteStore par exemple. Ainsi toute modification dans le store (dont ajouts - via newItem - et suppressions - via deleteItem - seraient reflétées). Un peu plus contraignant mais jouable sans souci, il te faut juste récupérer tes villes au changement de département et les ajouter au store (et supprimer les autres ? bof bof à voir).

Bon dev,

ERE

**heyrelec** · 20/01/2012, 15h24

Re,

Est-ce que tu sais s'il existe un tuto en français ou un livre du dojo?

Le livre que j'ai acheté ne traite absolument pas de ça.
Après lecture, je me rends compte qu'il est plus une prise en main rapide qu'une réelle maîtrise de dojo.

Merci.

LGN

**emmanuel.remy** · 20/01/2012, 17h01

A ma connaissance, pour les dernières versions il n'existe pas de bouquin

ERE

ComboBox avec Dojo

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager