Select to view content in your preferred language

onChange listener not firing

975
4
Jump to solution
06-02-2014 09:59 AM
AlexGole1
Emerging Contributor
Hi all,
I am trying to have one-button push to activate three different functions independently. Thre three functions are:


1st function: Extratct data per graphics
2nd function: extract data per query (county)
3rd function: extract data per query (unit)

The idea is that I would use a switch... case  statements and have a global variable that allows users to overwrite the value as such.

  on(dom.byId("sel_county"), "onChange", function () {             extractMethod = "extractByCounty";             console.log("You are selecting a county!");          });          on(dom.byId("sel_unit"), "onChange", function () {             extractMethod = "extractByUnit";             console.log("You are selecting a unit!");          });            function initSelectionToolbar() {             map.graphics.clear();              selectionToolbar = new Draw(map);             selectionToolbar.on("draw-end", function (e) {                selectionToolbar.deactivate();                 var symbol3 = new SimpleFillSymbol(                   "solid",                   new SimpleLineSymbol("dash", new Color([255, 0, 0]), 2),                   new Color([255, 255, 0, 0.25])                );                 var graphic = new Graphic(e.geometry, symbol3);                map.graphics.add(graphic);       extractMethod = "extractByPoly";             });          }           function activateTool(tool) {             map.graphics.clear();             // The draw.activate expects a string like "polygon" or "freehand_polygon".             selectionToolbar.activate(tool);          }               function myFunction() {     //var extractMethod = "extractByPoly";     //var extractMethod = "extractByCounty";     //var extractMethod = "extractByUnit";  switch (extractMethod) {         default:              //function extractData() {             //get clip layers             var clipLayers = [];             if (registry.byId("layer1").get("checked")) {                 clipLayers.push("SRA");             }             if (registry.byId("layer2").get("checked")) {                 clipLayers.push("Burn");             }             if (clipLayers.length === 0 || map.graphics.graphics.length === 0) {                 alert("Select layers to extract and draw an area of interest.");                 return;             }              var featureSet = new FeatureSet();             var features = [];             features.push(map.graphics.graphics[0]);             featureSet.features = features;              var params3 = {                 "Layers_to_Clip": clipLayers,                 "Area_of_Interest": featureSet,                 "Feature_Format": registry.byId("formatBox").get("value")             };              domStyle.set(loading2, "display", "inline-block");             gp.submitJob(params3, completeCallback, statusCallback2, function (error) {                 alert(error);                 domStyle.set(loading2, "display", "none");             });             //}             break;   case "extractByCounty":             //function executeQueryTask(county) {             var clipLayers = [];             if (registry.byId("layer1").get("checked")) {                 clipLayers.push("SRA");             }             if (registry.byId("layer2").get("checked")) {                 clipLayers.push("Burn");             }             if (clipLayers.length === 0) {                 alert("No layers to clip, please select a layer you would like to clip...");                 return;             }            var county = document.getElementById("sel_county").value             var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");             var query = new Query();             query.returnGeometry = true;             query.outFields = ["NAME_PCASE"];             query.where = "NAME_PCASE = '" + extractMethod + "'";             query.outSpatialReference = map.spatialReference;             queryTask.execute(query, function (featureSet) {        if (featureSet.features.length === 0) {                      alert("Query task did not return any features");                  return;                 } else {                 var AOI = featureSet.features[0].geometry;                 var graphic = new Graphic(AOI, symbol);                 var features = [];                 features.push(graphic);                 var fSet = new FeatureSet();                 fSet.features = features;                   var params = {                     "Layers_to_Clip": clipLayers,                     "Area_of_Interest": fSet,                     "Feature_Format": registry.byId("formatBox").get("value")                 };                    domStyle.set(loading, "display", "inline-block");                 gp.submitJob(params, completeCallback, statusCallback, function (error) {                     alert(error);                     domStyle.set(loading, "display", "none");                 });     }             });                     //}             break; 


The default in the switch statement works normally. However, the two other statemnets dont work because the Javascript listener do not fire up correctly.

on(dom.byId("sel_county"), "onChange", function () {             extractMethod = "extractByCounty";             console.log("You are selecting a county!");          });          on(dom.byId("sel_unit"), "onChange", function () {             extractMethod = "extractByUnit";             console.log("You are selecting a unit!");          });


Any ideas how to make the listeners fire up?
0 Kudos
1 Solution

Accepted Solutions
JeffPace
MVP Alum
on(dom.byId("sel_county"), "onChange", function () {

this will never fire

dom.byId returns the dom element.  THat does not have an onchange method.

you want registry.byId to return the dijit.  then you can do

on(registry.byId("sel_county"), "change", function () {

View solution in original post

0 Kudos
4 Replies
JeffPace
MVP Alum
on(dom.byId("sel_county"), "onChange", function () {

this will never fire

dom.byId returns the dom element.  THat does not have an onchange method.

you want registry.byId to return the dijit.  then you can do

on(registry.byId("sel_county"), "change", function () {
0 Kudos
AlexGole1
Emerging Contributor
http://stackoverflow.com/questions/23376417/difference-between-registry-byid-and-dom-byid-in-dojo-wh...


The listener works like a charm now! Thank you! Now what I dont understand is that it seems like it sees that I am selecting a county or unit but does not transfer the value that I am selecting to the switch statement. Should I add a ".value" somewhere?
0 Kudos
AlexGole1
Emerging Contributor
The value is not sent to the query

var unit = document.getElementById("sel_unit").value

I am using this code to send the value to the query.
0 Kudos