Latest Contributions by LauraMiles1

Hi everyone, I'm using the ESRI sample for turning my layers on and off: Toggle layer visibility | ArcGIS API for JavaScript   I've tried to modify things because I have some checkboxes that I'd like to be able to turn on and off as a group. As I've written the code, turning these on and off using the "Select All" link does seem to work fine, until it gets to this line (line 29 in the codeblock below):   var inputs = query(".enviro_list_item")   At this point it's passed the case test, but it seems that the variable "inputs" is empty.   I get an 'Uncaught TypeError: Cannot read property of 'length' of undefined' in my NetBeans Console, and the layers within the div (everything that just got checked) are not drawn. However if I check a checkbox with the same class, outside or inside the div (as long as I'm not using "Select All"), all the checked layers do get drawn. I tried to look up exactly what this query(".enviro_list_item") does but I can't find any information on query(). I'm guessing it polls the values of the checkboxes within the specified class and puts them in an array. But why would it not work because these are being turned on/off via the html link? It must be to do with the click or change event not being fired? I tried adding this jquery (line 13 below) but it didn't make a difference:   $(targetSelectMenu).find(':checkbox').trigger('change');   If I could get the above working, I think I would not need line 15 then?     Here is my code   HTML:   <div id="divMenuEnvironment" class='divMenu'>                         <label id="lblBIEAP" class="lblSubMenuItem"><img id="imgBIEAP" src="Images\plus.png" width="13"/>BIEAP</label><a class="aSelectAll" id="aBIEAPSelectAll"> Select All</a></br>                         <div id='divMenuBIEAP' class='divSubMenu'>                             <div id='txtBIEAPHighTide' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPHighTide' value=26 />High Tide Line</div>                             <div id='txtBIEAPLowTide' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPLowTide' value=38 />Low Tide Line</div>                             <div id='txtBIEAPShoreSeg' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPShoreSeg' value=37 />Shoreline Segments</div>                             <div id='txtBIEAPOverVeg' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPOverVeg' value=36 />Overhanging Vegetation</div>                             <div id='txtBIEAPShoreEros' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPShoreEros' value=35 />Shoreline Erosion</div>                             <div id='txtBIEAPOutfalls' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPOutfalls' value=34 />Outfalls</div>                             <div id='txtBIEAPIntFeat' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntFeat' value=33 />Interesting Features</div>                             <div id='txtBIEAPBirdNest' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPBirdNest' value=32 />Bird Nests</div>                             <div id='txtBIEAPIntPlant' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntPlant' value=31 />Introduced Plants</div>                             <div id='txtBIEAPIntVegFeat' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntVegFeat' value=30 />Intertidal Vegetation Features</div>                             <div id='txtBIEAPIntVegAreas' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntVegAreas' value=29 />Intertidal Vegetation Areas</div>                             <div id='txtBIEAPIntSubs' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntSubs' value=28 />Intertidal Substrates</div>                         </div>                         <label id="lblFREMP" class="lblSubMenuItem"><img id="imgFREMP" src="Images\plus.png" width="13"/>FREMP</label><a class="aSelectAll" id="aFREMPSelectAll"> Select All</a></br>                         <div id='divMenuFREMP' class='divSubMenu'>                             <div id='txtFREMPColCode' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPColCode' value=43 />Colour Codes</div>                             <div id='txtFREMPAreaDes' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPAreaDes' value=42 />Area Designation</div>                             <div id='txtFREMPHabComp' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPHabComp' value=41 />Habitat Compensation</div>                             <div id='txtFREMPHabOrd' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPHabOrd' value=40 />Habitat Order</div>                         </div>                         <div id='txtBoreholes' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBoreholes' value=0 />Boreholes</div>                         <img id='imgContSitesLock' src='Images\lock.png' height='0' style='float:left;' title='You do not have access to this layer'/>                         <div id='txtContSites' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkContSites' value=45 />Contaminated Sites</div>                         <img id='imgEnvLibLock' src='Images\lock.png' height='0' style='float:left;' title='You do not have access to this layer'/>                         <div id='txtEnviroLib' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkEnvLib' value= />Enviro Library</div>                         <div id='txtHabComp' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkHabComp' value=17 />Habitat Compensation Sites</div>                     </div>   Javascript:   //The following fires when a "Select All" link is clicked to turn all layers in a subgroup on/off $(".aSelectAll").click(function(){     //cut off the "a" and "SelectAll" from the clicked link's id     //example id would be 'aBIEAPSelectAll'     var targetSelectAll = ((event.srcElement.id).replace("SelectAll", '')).slice(1);     //piece together the id of the menu targeted     //example result would be "#divMenuBIEAP     var targetSelectMenu = "#divMenu" + targetSelectAll;     //find all the checkboxes in the divMenu and toggle them     var checked = $(this).data('checked');     $(targetSelectMenu).find(':checkbox').prop('checked', !checked);     $(this).data('checked', !checked);     $(targetSelectMenu).find(':checkbox').trigger('change');     //run the function to update the visibility of layers     updateLayerVisibility(); });   on(document.body, ".cadastral_list_item:change", updateLayerVisibility); on(document.body, ".enviro_list_item:change", updateLayerVisibility);           function updateLayerVisibility () {               switch(event.srcElement.className) {                 case "cadastral_list_item":                     var inputs = query(".cadastral_list_item");                     var serviceLayer = layerCadastral;                     break;                 case "enviro_list_item":                     var inputs = query(".enviro_list_item");                     var serviceLayer = layerEnvironment;                     break;             }            var inputCount = inputs.length;               visibleLayerIds = [1001];             for (var i = 0; i < inputCount; i++) {               if (inputs.checked) {                 visibleLayerIds.push(inputs.value);               }             }             if (visibleCadastralLayerIds.length === 0) {               visibleLayerIds.push(-1);             }             serviceLayer.setVisibleLayers(visibleLayerIds);             // run the identify task setup every time the layer visibility is updated             identifyTaskSetup();             //refresh the legend             legendDijit.refresh();         }   ... View more

Hi All, I'm using the following from the ESRI JS samples to toggle my layers on and off, and it works well enough: Toggle layer visibility | ArcGIS API for JavaScript However, getting each checkbox by its id seems a rather bloated way of doing things when you're working with ~100 layers. I'm pretty new to javascript so I'm not sure of the syntax to get the checkboxes by class, or if this can even work? I've tried multiple id's: on(dom.byId("chkVFPABoundary", "chkMunicipalBoundaries"), "change", updateCadastralLayerVisibility); Which didn't work. Also: on(document.getElementsByClassName(".cadastral_list_item"), "change", updateCadastralLayerVisibility); //Anything in my cadastral service has this class name Which didn't work. I'm pretty sure I can't use 'on' with document.getElementsByClassName? Is there something comparable? I tried jquery: $('.cadastral_list_item').change(function() {     if(this.checked) {     updateCadastralLayerVisibility()     } }); This didn't work either, nothing happens at all when the checkbox is clicked. I've been scouring the internet all day, but can't find any clues. Thanks in advance. ... View more