AnsweredAssumed Answered

Trouble with on.pausable for map extent-change events

Question asked by schlot on Feb 27, 2015
Latest reply on Apr 3, 2015 by schlot

I have a queryTask that populates a dGrid based on the user's selection from a dropdown list.  Initially the dGrid is empty and the user must select  from a list of school districts.  Once the user makes a selection, only those schools appear in the grid.  I would like the user to be able to clear that selection and automatically change the contents of the grid to be all schools in the current map extent instead.

 

The queryTask that selects the schools by district is handled by

 registry.byId("distSelect").on('change', function(){
            clearDiv('searchResultsGrid');
            var distCode = registry.byId("distSelect").value;
            selectSchoolsByDistrict(distCode);
        });
        function selectSchoolsByDistrict(distCode){
            extResults = false;
            extentChangeHandler.pause();
            schoolQuery.where = "SD_GIS.OGI.EDUCATION_SCHOOL_PUBLIC.CtyDist = '" + distCode + "'";
            schoolQueryTask.on('complete', completeSelection);
            schoolQueryTask.execute(schoolQuery);
        }
        function selectSchoolsError(err){
            console.log("Error in selectSchoolsByDist " + err.message);
        }
        function completeSelection(results){
            if (results) {
                updateGrid(results.featureSet);//populate the school list
                //  switchDomClass('btnClearSel','show');
                zoomDistrict();//zoom to the school district
            }
            
        }

I have an event listener defined for the map's extent change that executes another query based on the current map extent, rather than a where clause.

        extentChangeHandler = on.pausable(map, 'extent-change', function(map){
            clearDiv('searchResultsGrid');
            var schoolQuery2 = new Query();
            schoolQuery2.outSpatialReference = spatialReference;
            schoolQuery2.returnGeometry = true;
            schoolQuery2.outFields = ['*'];
            schoolQuery2.geometry = map.extent;
            if (extResults) {
                schoolQueryTask2.execute(schoolQuery2, updateGrid);
            }
        });

I have a button for clearSelection that resets my title, clears my grid and is supposed to resume my extentChangeHandler.

        registry.byId('btnClearSel').on('click', function(){
            extResults = true;
            extentChangeHandler.resume();
            var currentExtent = map.extent;
            map.setExtent(currentExtent);
            clearDiv('countyDistGridDiv');
            clearDiv('searchResultsGrid');
            map.infoWindow.hide();
            switchDomClass('countyDistGridDiv', 'hide');
            dom.byId('subHeader').innerHTML = 'Missouri Public School Directory';
            registry.byId('footerPane').domNode.innerHTML = "";
            dom.byId('chooseHeader').innerHTML = "";
            dom.byId('listHeader').innerHTML = "All schools shown on map:";
            registry.byId("distSelect").reset();
            registry.byId("countySelect").reset();
        }

);

 

It didn't feel like just resuming the extentChangeHandler was going to execute, so I added a map.setExtent(currentExtent) to try to fire the paused event, which I think I'm resuming.  When I put a breakpoint in extentChangeHandler, it doesn't look like it ever gets to the lines that schoolQueryTask2.

 

I'm not 100% sure I need the Boolean extResults, which I have set initially as false.  It seems like I want it so that the grid doesn't immediately start populating with thousands of schools from this state-wide map.

 

Here's a link:

https://ogitest.oa.mo.gov/DESE/schoolSearch/index.html

Outcomes