ZoomTo from a dynamically created Table

AlexanderAnkrah — Tue, 10 Aug 2010 09:59:32 GMT

Hi Folks,
Wondering if anyone can help unmask the error of my ways (code).

The results of my identify task are put into a dynamically created table and for every record I have appended a "Zoom To" text which onClick, I want the to zoom to that feature on the map.

I'm having two issues which I've spent hours on but can't seem to resolve...

1. in IE7, when my results are displayed and I click on the "Zoom To" on any of the records except the very first record, the app does exactly as expected and zooms into the geometry/feature. However, nothing happens afterwards when i click on any of the other "Zoom To"!

2. Clicking "Zoom To" of the first record results in the error " 'target' is null or not an object ". FF however only zooms to the first and the second record!! And doesn't zoom to any another record.

Any help would be very much appreciated

//****IDENTIFY - DYNAMIC TABLE AND RESULTS SNIPPET*****//

resultSetToTable: function(resultSet, that){
        // Receives result array (featureSet) from an Identify Task/Query Task/Find Task and 
        // returns an array of tables for each layer in the result.
        
        // TODO : Validate input resultSet object.
        // collection of objects with feature property, containing attributes.
        var result;
        
        if (resultSet.length > 0) {
            var featureLayerId, feature;
            var resultTableArray = new Array(); // Array to store tables in. One Table for each layer that has identify results.
            // Create table elements, these will be cloned later
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var th = document.createElement('th');
            
            var tHead, tHeadRow, tHeadCell, tBody, tRow, tCell; // Reused when creating each table.
        }
        else {
            // No Data
            return null;
        }
        
        for (var i = 0, il = resultSet.length; i < il; i++) {
            // Loop through each feature in the featureSet.
            result = resultSet;
            
            if (resultTableArray[result.layerId] === undefined) {
                // No table created for that layer
                
                // Create table object
                resultTableArray[result.layerId] = document.createElement('table');
                resultTableArray[result.layerId].className = "ImmTS_Default";
                
                // write header to the table   
                tHead = resultTableArray[result.layerId].appendChild(document.createElement('thead'));
                tHeadRow = tHead.appendChild(tr.cloneNode(true));
                
                // Check for geometry
                if (result.feature.geometry && that) {
                    tHeadCell = tHeadRow.appendChild(th.cloneNode(true));
                    //tHeadCell.appendChild(document.createTextNode(""));
                }
                for (var attribute in result.feature.attributes) {
                    if (this.displayField(attribute)) {
                        tHeadCell = tHeadRow.appendChild(th.cloneNode(true));
                        tHeadCell.appendChild(document.createTextNode(this.getFieldAlias(result.layerId, attribute)));
                    }
                    
                }
                // create table body.
                tBody = resultTableArray[result.layerId].appendChild(document.createElement('tbody'));
                
                // Write row
                tRow = tBody.appendChild(tr.cloneNode(true));
    tRow.id = "Result_" + i;
                // Check for geometry
                if (result.feature.geometry && that) {
                    tCell = tRow.appendChild(td.cloneNode(true));
     var tAnchor = document.createElement('a');
     tAnchor.appendChild(document.createTextNode("Zoom to"));
     tAnchor.title = "Zoom to this feature";
                    tCell.appendChild(tAnchor);
                    tCell.onclick = jQuery.proxy(function(evt){
      var resultID = $(evt.target).closest('tr')[0].id.split('_')[1];// Get parent tr ID.
      
      that.zoomtoGeometry(resultSet[resultID].feature);
                    }, this);
                }
                for (var attribute in result.feature.attributes) {
                    if (this.displayField(attribute)) {
                        tCell = tRow.appendChild(td.cloneNode(true));
                        tCell.appendChild(this.getActiveText(result.feature.attributes[attribute]));
                    }
                }
            }
            else {
                // Find table body within table element.
                tBody = resultTableArray[result.layerId].getElementsByTagName('tbody')[0];
                tRow = tBody.appendChild(tr.cloneNode(true));
                // Write row to table
    // Geometry
    if (result.feature.geometry && that) {
     tCell = tRow.appendChild(td.cloneNode(true));
     var tAnchor = document.createElement('a');
     tAnchor.appendChild(document.createTextNode("Zoom to"));
     tAnchor.title = "Zoom to this feature";
     tCell.appendChild(tAnchor);
     tCell.onclick = jQuery.proxy(function(){
      
      that.zoomtoGeometry(result.feature);
     }, this);
    }
                for (var attribute in result.feature.attributes) {
                    if (this.displayField(attribute)) {
                        tCell = tRow.appendChild(td.cloneNode(true));
                        tCell.appendChild(this.getActiveText(result.feature.attributes[attribute]));
                    }
                }
            }
            
        }
        return resultTableArray;

//**** ZOOM TO - SNIPPET ****//

zoomtoGeometry: function(graphic, graphicLayerName){
        var graphicLayer;
        var resultGraphic = graphic;
        // Create or obtain graphic layer
        var graphicLayerID = graphicLayerName || "resultGraphics";
        if (this.TEAMGISmap.getLayer(graphicLayerID)) {
            graphicLayer = this.TEAMGISmap.getLayer(graphicLayerID);
            graphicLayer.clear();
        }
        else {
            graphicLayer = new esri.layers.GraphicsLayer();
            graphicLayer.id = graphicLayerID;
            this.TEAMGISmap.addLayer(graphicLayer);
        }
        
        // Setup Graphic Symbology & Zoom Extent Buffer.
        var symbol, buffDist, graphicExtent;
        var fillColour = new dojo.Color(dojo.Color.named.yellow);
        fillColour.a = 0.55;
        switch (resultGraphic.geometry.type) {
            case "point":
                symbol = new esri.symbol.SimpleMarkerSymbol().setColor(fillColour);
                symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
                buffDist = 250;
                break;
            case "polyline":
                symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color(dojo.Color.named.yellow, 0.55), 4);
                buffDist = 1000;
                break;
            default:
                symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 255, 0.35]), 1), fillColour);
                buffDist = 1000;
        }
        resultGraphic.setSymbol(symbol);
        graphicLayer.add(resultGraphic);
        if (resultGraphic.geometry.type !== "point"
        ) {
   graphicExtent = resultGraphic.geometry.getExtent();
   graphicExtent.xmin -= buffDist;
   graphicExtent.ymin -= buffDist;
   graphicExtent.xmax += buffDist;
   graphicExtent.ymax += buffDist;
  }
  else
  {
   // Point geometries don't have getExtent method. Create extent with buffdist + xy.
   graphicExtent = new esri.geometry.Extent();
   graphicExtent.xmin = resultGraphic.geometry.x - buffDist;
   graphicExtent.ymin = resultGraphic.geometry.y - buffDist;
   graphicExtent.xmax = resultGraphic.geometry.x + buffDist;
   graphicExtent.ymax = resultGraphic.geometry.y + buffDist; 
   graphicExtent.spatialReference = resultGraphic.geometry.spatialReference;
   
  }
        this.TEAMGISmap.setExtent(graphicExtent, true);
        
        
    },

topic ZoomTo from a dynamically created Table in ArcGIS JavaScript Maps SDK Questions

ZoomTo from a dynamically created Table