I have this simple select dropdown and after I select it once, it freezes! However, if I remove the label of the next control (textbox) it works! Bizarre. How can the select work with the label of the textbox? Thank you.
HTML select freezes:
<script src="http://js.arcgis.com/3.14/"></script> <script src="js/select.js"></script> </head> <body bgcolor="blue" class="claro"> <div style="margin-top: 40px"> <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label> <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" > </select> <br /> <label data-dojo-attach-point="identifyFromLbl" id="lbl_desc" style="width:25%; padding-top:40px;margin-bottom:10px;margin-right:10px; margin-left: 40px; margin-top: 20px; font-size: 1.25em; color:white;vertical-align: middle ">Enter a Project Description (optional): </label> <input type="text" style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="proj_desc" /> <div> </div> </div> </body>
HTML select works:
<script src="http://js.arcgis.com/3.14/"></script> <script src="js/select.js"></script> </head> <body bgcolor="blue" class="claro"> <div style="margin-top: 40px"> <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label> <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" > </select> <br /> <input type="text" style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value="" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="proj_desc" /> <div> </div> </div> </body>
js:
require([ "dojo/ready", "dojo/on", "dojo/_base/connect", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "esri/domUtils", 'dijit/_WidgetsInTemplateMixin', "dijit/Menu", "dijit/MenuItem",'dijit/form/Select', "dojo/domReady!"], function( ready, on, connect, dom, registry, domConstruct, parser, domUtils, _WidgetsInTemplateMixin, Menu, MenuItem, Select ){ parser.parse(); setup_subject(); }); function setup_subject(){ dijit.registry.byId("subject").options.length = 0; subjectlist= []; subjectlist.push({label:"General Environmental", value: 0}); subjectlist.push({label:"Biology", value: 1}); subjectlist.push({label:"Haz Waste", value: 2}); subjectlist.push({label:"Air/Noise", value: 3}); subjectlist.push({label:"Water", value: 4}); dijit.registry.byId("subject").addOption({label:"Select Subject Area", value: 0}); dijit.registry.byId("subject").addOption(subjectlist); }
Lefteris,
I am really confused by your code. You are in the Web AppBuilder group so you are building a widgets template right?
If so why do you have:
<script src="http://js.arcgis.com/3.14/"></script> <script src="js/select.js"></script> </head> <body bgcolor="blue" class="claro">
A widget template should not have a body, head, script
The parent element of a widgets template should be a div and that it.
Sorry. I meant to post it under the JS group. I will repost it under that group.