2010-04-01 6 views
6

Je semble incapable d'attacher correctement l'événement onchange à un widget dijit.form.Select. Cependant, je suis nouveau au développement web, donc je pourrais faire quelque chose de complètement idiot (bien que, du mieux que je peux dire (et j'ai lu tous les docs que j'ai pu trouver) je ne suis pas). Je me suis assuré que la classe corresponde au thème dojo, que je dojo.require() pour tous les widgets que j'utilise (et dojo.parser), et encore, nada. Le code que j'utilise est:Je ne peux pas obtenir surChanger pour déclencher dijit.form.Select

dojo.addOnLoad(function() { 
    var _query = dojo.query('.toggle'); 
    for (var i in _query) { 
     dojo.connect(_query[i], 'onchange', function (ev) { 
      console.log(ev + ' fired onchange'); 
     }); 
    } 
}); 

Toute aide serait appréciée. Ajout: après avoir creusé plus dans les internes de la façon dont dijit rend les widgets, j'ai découvert que lorsque j'ajoute la paire attribut-valeur dojoType = 'dijit.form.Select' à mon élément html (ceci de manière déclarative), dijit rend une table à deux colonnes à une rangée. Le premier élément de la table est un span (avec la classe dijitSelectLabel) que je suppose qui affiche simplement l'élément sélectionné (ou par défaut). Son deuxième élément semble être un bouton rendu comme une flèche vers le bas qui bascule l'affichage du menu itmes en réponse à certains événements DOM. Aussi (et je pensais que c'était assez chouette), dijit ne place pas réellement les options de sélection dans l'arbre DOM tant que l'un de ces événements n'est pas déclenché. J'ai regardé le HTML dans firebug juste après une nouvelle pageload (avant que je clique sur quelque chose), et la deuxième option n'est nulle part à trouver. Ensuite, une fois que je clique sur le bouton fléché, il y a un widget dijit.Menu, dijit colle un dijit.Menu à la fin du nœud du corps; après avoir cliqué ailleurs, le widget Menu est toujours lastChild du corps, maintenant il est juste caché et n'est pas attaché au widget forme.Select.

Est-ce que ce serait vraiment compliqué si tout ce que je veux faire est de placer un widget dijit.form différent dans l'arborescence du DOM en fonction de quel élément l'utilisateur sélectionne?

Conclusion: Il s'avère que c'était un problème de capitalisation.

dojo.connect(widget_obj, 'onChange', function_obj); 
fonctionne, alors que

dojo.connect(widget_obj, 'onchange', function_obj); 
ne fonctionne pas.

J'avais donc raison d'être complètement stupide. J'ai supposé que parce que la version tout en minuscules fonctionne en plaçant une balise html en tant qu'attribut, Dojo traiterait la même chose. Cela a du sens, car dijit.form.Select n'a pas d'attribut .onchange, mais possède un attribut .onChange. (J'ai fini par coller avec un .Select sur un .FilteringSelect parce que je ne donne pas à mes utilisateurs l'impression qu'ils peuvent taper quelque chose.) Alors, lequel de vous, je donne la réponse (parce que vous deux J'avais changé dans vos messages, je suppose que j'étais trop inexpérimenté pour réaliser que l'affaire comptait)?

Répondre

2

Effectuez les opérations suivantes lorsque vous faites un dojo.connect:

var inputEvents = []; //Global var 

    inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj)); 

magasin la connexion dans un var global.

+0

J'ai essayé à la fois dijit.byId (nodeId) et dijit.byNode (node) et aucune approche n'a fonctionné. – yarmiganosca

1

Dans votre code, vous connectez un gestionnaire à l'événement 'onchange' des nœuds dom, pas aux widgets dojo. dojo.query vous renvoie un objet NodeList - une collection de nœuds qui correspondent à la requête.
Dans ce cas, il est plus fiable de se connecter à l'événement 'onChange' d'un widget, comme l'a montré GoinOff. Juste un petit ajout à sa réponse pour s'assurer que vous faites bien.
Supposons que ceci soit votre code HTML (dans les versions ultérieures de Dojo, dijit.form.Select a été remplacé par dijit.form.FilteringSelect):

<input dojoType="dijit.form.FilteringSelect" id="stateInput" store="stateStore" searchAttr="name" name="state"/> 

Ensuite, vous connecter à « onChange » de cette façon (vous pouvez également enregistrer la connexion dans une matrice pour pouvoir le déconnecter plus tard, comme GoinOff suggéré):

dojo.addOnLoad (function() { 
    dojo.connect(dijit.byId("stateInput"), "onChange", function(){}); 
} 

Mais c'est une autre histoire si vous ne connaissez pas l'identifiant de votre widget et que vous souhaitez utiliser dojo.query pour vous connecter à plusieurs widgets.

+0

Cela n'a pas fonctionné non plus (surtout parce que les options rendues en dehors du widget jusqu'à ce que je l'ai changé en