Mobile Find Nearby location - problems with feature.selectFeatures in IE8

TracySchloss · ‎10-25-2012

I am working through the Find Nearby Location example, changing it for my services and also allowing the user to enter an address if they don't have geoLocation enabled.

This works fine in Firefox. The user enters their address, then chooses which feature they want to find near that address. If I try this in IE, adding a breakpoint in the featureLayer.selctFeatures function, I can add a watch on features and see there are several items in that array.

 featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW, function(features){
                    var itemList = dijit.byId('searchResults');
                    //Remove any existing items from the result window
                    while (itemList.domNode.hasChildNodes()) {
                        itemList.domNode.removeChild(itemList.domNode.lastChild);
                    }
                    //If no results are found users should increase search distance
                    if(features.length === 0){
                            var noResults = new dojox.mobile.ListItem({
                            label: "No Results"
                        });
//breakpoint inserted here
                        noResults.set("class", "mblVariableHeight");
                        noResults.domNode.innerHTML = "No results found within search radius. Use the settings option to increase the search distance.";
                        itemList.addChild(noResults);
                        return;
                    }

It gets past (features.length === 0) and moves to the dojo.forEach loop which comes immediately after :

 dojo.forEach(features, function (feature) {
                        feature.distance = Math.round((esri.geometry.getLength(feature.geometry, currentGraphic.geometry) / 1609.344) * 100) / 100;
                    });

Here it fails. When I look at the watch on features, once I'm in the line dojo.forEach , instead of having content, suddenly it is an empty array. At first I thought it was having trouble with the calculation of the distance, but it doesn't seem to even be entering this loop since it doesn't think there's any features to loop through. This doesn't happen in Firefox, only in IE (testing on IE 8).

TracySchloss · ‎10-25-2012

As I read further, I saw something that said dojo.forEach was something optimized for HTML5. Could that be my problem, that IE 8 doesn't fully support it?

TracySchloss · ‎11-08-2012

Continuing to populate my own thread! Oh well, maybe what I'm working through will help someone else. I was correct in that it is failing in the dojo.forEach loop where it is supposed to be creating items to put in as search results. I can see there are values returned from a featureLayer.selectFeatures.

This is within my function that processes the returned features:

  dojo.forEach(sortedFeatures, function (result) {
        
                        var resultItem = new dojox.mobile.ListItem({
                            label: result.attributes.FACILITY
                        });
                        resultItem.set("class", "mblVariableHeight");
                        var content = [];
                        content.push(result.attributes.FACILITY + "<br />" + result.attributes.ADDRESS + "<br />" );                    
                        content.push(result.distance + " miles<br/>");
                        var formatContent = content.join("");
        
                        resultItem.domNode.innerHTML = formatContent;
                        var button = new dojox.mobile.Button({
                            label: 'Map It',
                            moveTo: 'mapView'
                        }).placeAt(resultItem.domNode);
        
                        var locationDetails = function (result) {
                            return function (results) {
                                mapResults(results, result);
                            };
                        };
        
                        dojo.connect(button, "onClick", locationDetails(result));
                        //clearProgress();
                        itemList.addChild(resultItem);
                    });

Putting a watch on resultItem, I see there is an object created for each feature. It looks like the line itemList.addChild is adding features in itemList. But when it finishes, and slides to the Search Results, testing in IE 8 there is nothing listed.
http://wwwgis.dhss.mo.gov/Website/mobileWIC/WIC.html

JeffPace · ‎11-09-2012

Continuing to populate my own thread! Oh well, maybe what I'm working through will help someone else. I was correct in that it is failing in the dojo.forEach loop where it is supposed to be creating items to put in as search results. I can see there are values returned from a featureLayer.selectFeatures.

This is within my function that processes the returned features:

  dojo.forEach(sortedFeatures, function (result) {
        
                        var resultItem = new dojox.mobile.ListItem({
                            label: result.attributes.FACILITY
                        });
                        resultItem.set("class", "mblVariableHeight");
                        var content = [];
                        content.push(result.attributes.FACILITY + "<br />" + result.attributes.ADDRESS + "<br />" );                    
                        content.push(result.distance + " miles<br/>");
                        var formatContent = content.join("");
        
                        resultItem.domNode.innerHTML = formatContent;
                        var button = new dojox.mobile.Button({
                            label: 'Map It',
                            moveTo: 'mapView'
                        }).placeAt(resultItem.domNode);
        
                        var locationDetails = function (result) {
                            return function (results) {
                                mapResults(results, result);
                            };
                        };
        
                        dojo.connect(button, "onClick", locationDetails(result));
                        //clearProgress();
                        itemList.addChild(resultItem);
                    });

Putting a watch on resultItem, I see there is an object created for each feature. It looks like the line itemList.addChild is adding features in itemList. But when it finishes, and slides to the Search Results, testing in IE 8 there is nothing listed.
http://wwwgis.dhss.mo.gov/Website/mobileWIC/WIC.html

I dont see where you defined itemList, which means it is defined outside the loop. I think you have a scope issue, where itemList is not properly referenced

try changing to

dojo.forEach(sortedFeatures, dojo.hitch(this, function (result) {
...
}));

TracySchloss · ‎11-09-2012

It's defined right above it, still within the same function. The entire function was rather long and I was trying to post only the lines I thought I was having problems with:

function queryFeatures(queryVal, distance){
            console.log("Finding nearest " + queryVal);
      //      createProgress('searchResults');
            var params = new esri.tasks.BufferParameters();

            params.geometries = [ currentGraphic.geometry ];
            //buffer in linear units such as meters, km, miles etc.
            if(distance){
                params.distances = distance;
            } else{
                params.distances = [ currentBufferDist ];
            }
            params.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
            params.outSpatialReference = map.spatialReference;
            geomService.buffer(params, function(geometries){
              //  query.geometry = geometries[0];
                var bufferGeometry = geometries[0];
                var geometryExtent = bufferGeometry.getExtent();
                 query.geometry = geometryExtent;
                query.outSpatialReference = map.spatialReference;
                switch(queryVal){
                     case 'offSat':
                    featureLayer = offSatFeatureLayer;
                    featureLayer.renderer = offSatRenderer;
                    featureLayer.infoTemplate = offSatInfoTemplate;
                    break;
                    case 'vendor':
                    featureLayer = venFeatureLayer;
                    featureLayer.renderer = venRenderer;
                    featureLayer.infoTemplate = venInfoTemplate;
                    break;
                }
                featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW, function(features){
                    var itemList = dijit.byId('searchResults');
                    //Remove any existing items from the result window
                    while (itemList.domNode.hasChildNodes()) {
                        itemList.domNode.removeChild(itemList.domNode.lastChild);
                    }
                    //If no results are found users should increase search distance
                    if(features.length === 0){
                            var noResults = new dojox.mobile.ListItem({
                            label: "No Results"
                        });
                        noResults.set("class", "mblVariableHeight");
                        noResults.domNode.innerHTML = "No results found within search radius. Use the settings option to increase the search distance.";
                        itemList.addChild(noResults);
                        return;
                    }
                    dojo.forEach(features, function (feature) {
                        feature.distance = Math.round((esri.geometry.getLength(feature.geometry, currentGraphic.geometry) / 1609.344) * 100) / 100;
                    });
                    
                    var sortedFeatures = features.sort(function(a, b){
                        return a.distance - b.distance;
                    });
 //HERE IS THE PART I POSTED ORIGINALLY
                    dojo.forEach(sortedFeatures, function (result) {
        
                        var resultItem = new dojox.mobile.ListItem({
                            label: result.attributes.FACILITY
                        });
                        resultItem.set("class", "mblVariableHeight");
                        var content = [];
                        content.push(result.attributes.FACILITY + "<br />" + result.attributes.ADDRESS + "<br />" );                    
                        content.push(result.distance + " miles<br/>");
                        var formatContent = content.join("");
        
                        resultItem.domNode.innerHTML = formatContent;
                        var button = new dojox.mobile.Button({
                            label: 'Map It',
                            moveTo: 'mapView'
                        }).placeAt(resultItem.domNode);
        
                        var locationDetails = function (result) {
                            return function (results) {
                                mapResults(results, result);
                            };
                        };
        
                        dojo.connect(button, "onClick", locationDetails(result));
                        //clearProgress();
                        itemList.addChild(resultItem);
                    });
                    clearProgress();
                    //
           }
                ,function(error){
                   alert(error.message);
                     });        
                    
            }, function(error){
                alert(error.message);
            });
            
        }

JeffPace · ‎11-09-2012

Thats what i thought. I still think its a scoping issue

TracySchloss · ‎11-09-2012

And that would cause it to fail in IE 8, but work just fine in Firefox? I'm getting a slightly diferent behavior in Chrome. It finds multiple features when it selects, but only one ends up in the itemList.

TracySchloss · ‎11-13-2012

I finally got my debugging to work in IE 8. The geocode functions create a graphic and sets my "currentGraphic" variable so I have a starting point for my selection. If I put a breakpoint or look at the console log in my 'onClick function of the listItem, it doesn't seem to ever by executing. I think I do want dijit.byId, not dojo.byId.

 dojo.connect(dijit.byId('WICoffSatItem'), 'onClick', function() {
               console.log("selected WIC office and satellites");
                if (!currentGraphic){
                alert("Geolocation not supported on this device. Please enter an address to begin your search");
                
                }else{
                   queryFeatures('offSat');  
                   console.log("querying offSat");
                }
           });

My list items have a "moveTo" defined in them, so the transition is happening, but not the onClick event.

 <li dojoType="dojox.mobile.ListItem" id="WICoffSatItem" moveTo="resultsView" title="Find Nearby WIC offices and satellites."
                iconPos="0,0,32,32" rightText="" > 
                 <img  src="images/Office.png"  alt="office image" style="clip: rect(0px, 32px, 32px, 0px); top: 7px; left: 8px;">
                  WIC offices and satellite
           </li> 
           <li dojoType="dojox.mobile.ListItem" id="WICvendorItem" moveTo="resultsView" title="Find Nearby Stores that accept WIC."
              iconPos="0,42,32,32" rightText="" > 
                <img  src="images/grocery_cart.png"  alt="cart image" style="clip: rect(0px, 32px, 32px, 0px); top: 7px; left: 8px;">
                  Stores that accept WIC coupons
            </li>