topic Re: Get "Value" from Dijit option, Yeah Right... in ArcGIS JavaScript Maps SDK Questions

Get "Value" from Dijit option, Yeah Right...

KeithSandell — Tue, 10 Aug 2010 20:07:44 GMT

Once again I have spent too much time working on this to feel intelligent any longer.

I've implemented a dijit.form.ComboBox, followed by a dijit.formButton:

The idea here is after the user selects a "displayed value" in the combobox, they click the button and fire off a function that does something based on the "value" of the selected item (<option value="someValue">).

I can get the "displayedValue" all day long and have found many ways to do that, but I simply cannot get inside the option to get the value of its attribute "value."

I've read more dijit and dojo reference than I care to admit and have tried everything I can find on the web, but to no avail.

It is kicking my @$$.

Please help!!

Thanks a million.

function getData(){
var selectedVal = {can't figure this part out};
if (selectedVal == "expired") {
do this;}
else if (selectedVal == "4") {
do this;}
else if (selectedVal == "future") {
do this;}

<div id="dropDown">
<select dojoType="dijit.form.ComboBox" id="selBox" class="dropSlam" value=" Select...">

<option value="expired"> Alex</option>
<option value="expired"> Bonnie</option>
<option value="4"> Colin</option>
<option value="future"> Danielle</option>
<option value="future"> Earl</option>
<option value="future"> Fiona</option>
<option value="future"> Gaston</option>
<option value="future"> Hermine</option>
<option value="future"> Igor</option>
<option value="future"> Julia</option>
<option value="future"> Karl</option>
<option value="future"> Lisa</option>
<option value="future"> Matthew</option>
<option value="future"> Nicole</option>
<option value="future"> Otto</option>
<option value="future"> Paula</option>
<option value="future"> Richard</option>
<option value="future"> Shary</option>
<option value="future"> Tomas</option>
<option value="future"> Virginie</option>
<option value="future"> Walter</option>

</select>
</div>

<div>
<button dojoType="dijit.form.Button" type="button" onClick="getData();">Retrieve Data
</button>
</div>

Re: Get "Value" from Dijit option, Yeah Right...

derekswingley1 — Sat, 11 Dec 2021 15:15:47 GMT

I ran into this in the past and got around it by using a filtering select. Same appearance and functionality but you will also be able to get to your "hidden" values.

Edit: try it out here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.FilteringSelect
Run this in the firebug console:

dijit.byId("setvaluetest").get('value')
dijit.byId("setvaluetest").get('displayedValue')

Re: Get "Value" from Dijit option, Yeah Right...

KeithSandell — Tue, 10 Aug 2010 20:46:10 GMT

swingley;31358 wrote:
I ran into this in the past and got around it by using a filtering select. QUOTE]

Thanks. I tried the Filtering Select as an alternative earlier, but it broke my application. Firebug references a line in ESRI's api:

http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0

line 16

Its throwing error, "node is undefined". I'd paste the code, but it is way too long.

I have dojo.require for it so I know its not that.

Any other alternatives/thoughts. I tried with std select, but it returns ~.get("value") is not a function.

Re: Get "Value" from Dijit option, Yeah Right...

derekswingley1 — Tue, 10 Aug 2010 21:25:17 GMT

Make sure you're passing a valid node ID to the filtering select constructor...if you've got a lot of code, maybe just upload it as an attachment?

Re: Get "Value" from Dijit option, Yeah Right...

ScottDavis — Sat, 11 Dec 2021 15:15:49 GMT

I agree with Derek; FilteringSelect is the way to go. This is what mine looks like:

<select dojoType="dijit.form.FilteringSelect"
 id="queries-combobox"
 name="queries-combobox"
 onChange="changeQuery(this.value);"
 style="width: 100%;">
  <option value="-1">Please select a query...</option>
  <option value="0">Precision Cutting History</option>
  <option value="3">Concrete Raising</option>
  <option value="6">elev diff >= 1/4" WITHOUT tree</option>
  <option value="9">elev diff >= 1/4" WITH tree</option>
  <option value="12">spalled <= 2"</option>
  <option value="15">cracked <= 2"</option>
  <option value="18">sunk <= 2"</option>
  <option value="21">elev diff >= 1" WITHOUT tree</option>
  <option value="24">elev diff >= 1" WITH tree</option>
  <option value="27">waterway hazard = 1 or 2</option>
  <option value="30">ADA - ramp needed</option>
  <option value="33">ADA - has tile (C or F)</option>
  <option value="36">ADA - glue down rubber mat</option>
  <option value="39">ADA - normal</option>
  <option value="42">ADA - non-standard</option>
  <option value="45">Tree Haz(1,2's) OWNER vs CITY</option>
  <option value="52">Management Intern Projects</option>
  <option value="57">ADA Contractors</option>
  <option value="82">Current Projects</option>
  <option value="85">Bomanite (Stamped Concrete)</option>
  <option value="88">Painted Hazards</option>
</select>

Re: Get "Value" from Dijit option, Yeah Right...

KeithSandell — Tue, 10 Aug 2010 22:13:01 GMT

I'd love to use the Filtering Select, but I can't even get as far as passing anything with or to it.

When I set the dojoType="dijit.form.FilteringSelect" my app won't even load, and it throws the error I mentioned earlier.

Just want to check, but what api version are ya'll using?

Re: Get "Value" from Dijit option, Yeah Right...

derekswingley1 — Wed, 11 Aug 2010 00:38:39 GMT

I've used Filtering Selects since v1.2 of the JS API.

Re: Get "Value" from Dijit option, Yeah Right...

KeithSandell — Wed, 11 Aug 2010 00:55:51 GMT

You're right. It does work at 2.0.

I just took an ESRI sample and added a dojo.campus sample to it and it worked without a hitch. There must be something else in my code that is causing a conflict.

Now to find it. I'm looking forward to implementing this so I can move on.

But something good did come out of this. I learned a bit about using data stores along the way. That should help trim up my html page code a bit since I have a fair number of drop downs.

Thanks for the help.

Re: Get "Value" from Dijit option, Yeah Right...

KeithSandell — Thu, 12 Aug 2010 12:25:16 GMT

Perhaps I have it wrong, but as of this writing it "appears" that using the declarative method of creating a FilteringSelect box will cause a fatal error in a Javascript Web Mapping Application, i.e. any/all layers will fail to load in the map div.

I got the FilteringSelect to work, but only by implementing it programmtically with a json data store.

Re: Get "Value" from Dijit option, Yeah Right...

RahulRavikumar — Sat, 11 Dec 2021 15:15:52 GMT

You have to be careful when you declarativily add widgets to your JavaScript application, as sometimes the dijit parser is a little slow in building DOM nodes, and therefore sometimes, the DOM node you look for may not be available. To solve this problem, you will need to do the following:

djConfig:"parseOnLoad:false"

dojo.require("dojo.parser");

dojo.addOnLoad(function() {
  //the first thing you do should be to parse all widgets in the page. Only then continue
  dojo.parser.parse();
  //continue with esri.Map (etc.)
});

Hope this helps.

Re: Get "Value" from Dijit option, Yeah Right...

KeithSandell — Fri, 27 Aug 2010 11:04:22 GMT

You have to be careful when you declarativily...Hope this helps.

Thanks for the info. I'll keep this in mind if I run into a situation where a declarative implementation is best.

But for the time being I have kinda fallen for implementing them progromatically. It keeps the HTML to a minimum and since my lists are fairly large I like using the json becuase I can keep it in a seperate js file.

Re: Get "Value" from Dijit option, Yeah Right...

MichaelGaigg — Sat, 11 Dec 2021 15:15:55 GMT

Get the selected item from the onChange event

   this.reportsDropdown = new ComboBox({
    store: _this.reportsStore,
    id: "cboReports",
    name: "cboReports",
    disabled: false,
    searchAttr: "label",
    onChange: this.reportsChangedEventHandler
   }, this.cboReports);

  reportsChangedEventHandler: function() {
   var report = this.item;
   console.log("Report selected: " + report.value);
   topic.publish("/Reports/changed", { report: report });
  }