Attribute Inspector Popup not showing up

ChristopherDeckert — Tue, 26 Apr 2011 15:34:53 GMT

I am new to javascript and have created a page that should mimic the Attribute Inspector Sample.
I have replaced the links with roads that need to have attributes available for changing. If I cut and past the sample code onto my site it works fine. If I change the links to my own feature service then the popup does not work. Any suggestions? I have included my code below . I have been testing by commenting out certain lines.
Any help would be appreciated.
You can view the working sample here:
http://maps.mapfactory.org/Test_Net.htm
and my non working version here:
http://maps.mapfactory.org/Test_NetDurham.htm

The Map Layer draws correctly on the overlay of the base layer. I just cant get the feature layer to respond to the "on Click" with a popup of the editable fields.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body {
        height: 98%; width: 98%;
        padding: 0;
        overflow:hidden;
      }
      #mapDiv{
        padding:0;
        border: solid 2px #705B35;
      }
      .roundedCorners {
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      #detailPane{
        height:20px;
        color:#570026;
        font-size:12pt;
        font-weight:600;
        overflow:hidden;
      }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      .esriAttributeInspector {height:100px;}
      .esriAttributeInspector .atiLayerName {display:none;}
      .saveButton {
        padding-left:45px;
         margin:0px;width:16px; height:16px;
       }
    </style>

    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

    <script type="text/javascript" language="Javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.AttributeInspector-all");

      var map;
      var updateFeature;

      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";

        var startExtent = new esri.geometry.Extent(-78.9860343,35.9206581,-78.83153915,36.02365493, new esri.SpatialReference({wkid:4326}) );

        map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(startExtent)});

        dojo.connect(map, "onLoad", function() {
         var resizeTimer;
          dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function(){
              map.resize();
              map.reposition();
            }, 500);
          });
        });

        dojo.connect(map, "onLayersAddResult", initSelectToolbar);

        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tiledLayer);

        var petroFieldsMSL = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.mapfactory.org/arcgis/rest/services/DurhamStreets/MapServer");
        petroFieldsMSL.setDisableClientCaching(true);

        map.addLayer(petroFieldsMSL);

        var petroFieldsFL = new esri.layers.FeatureLayer("http://maps.mapfactory.org/ArcGIS/rest/services/DurhamPrayer/FeatureServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
          //outFields: ["prefix","pretyper","name","type","suffix","prayer","selectdate"]
          outFields: ["*"]
        });

        //var selectionSymbol = new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color("yellow"), 2);
        //petroFieldsFL.setSelectionSymbol(selectionSymbol);

        dojo.connect(petroFieldsFL, "onEditsComplete", function() {
          petroFieldsMSL.refresh();
        });

        map.addLayers([petroFieldsFL]);
      }

      function initSelectToolbar(results) {


        var petroFieldsFL = results[0].layer;
        var selectQuery = new esri.tasks.Query();

        dojo.connect(map, "onClick", function(evt) {
          selectQuery.geometry = evt.mapPoint;
          petroFieldsFL.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(features) {
            if (features.length > 0) {
             //store the current feature
              updateFeature = features[0];
              map.infoWindow.setTitle(features[0].getLayer().name);
              map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
            } else {
              map.infoWindow.hide();
            }
          });

        });

        dojo.connect(map.infoWindow, "onHide", function() {
          petroFieldsFL.clearSelection();
        });

        var layerInfos = [{'featureLayer':petroFieldsFL,
           'showAttachments':false,
           'isEditable': true,
           'fieldInfos': [
           {'fieldName': 'prayer', 'isEditable':true, 'tooltip': 'Current Status', 'label':'Status:'},
           {'fieldName': 'selectdate', 'isEditable':true, 'tooltip': 'The name of this oil field', 'label':'Field Name:'},
           //{'fieldName': 'approxacre', 'isEditable':false,'label':'Acreage:'},
           //{'fieldName': 'avgdepth', 'isEditable':false, 'label':'Average Depth:'},
           //{'fieldName': 'cumm_oil', 'isEditable':false, 'label':'Cummulative Oil:'},
           //{'fieldName': 'cumm_gas', 'isEditable':false, 'label':'Cummulative Gas:'}
           ]}];



        var attInspector = new esri.dijit.AttributeInspector({
          layerInfos:layerInfos
          },
          dojo.create("div")
        );

        //add a save button next to the delete button
        var saveButton = new dijit.form.Button({label:"Save","class":"saveButton"});
        dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");


        dojo.connect(saveButton,"onClick",function(){
           updateFeature.getLayer().applyEdits(null, [updateFeature], null);
        });


        dojo.connect(attInspector, "onAttributeChange", function(feature,fieldName,newFieldValue) {
          //store the updates to apply when the save button is clicked
           updateFeature.attributes[fieldName] = newFieldValue;
        });

        dojo.connect(attInspector,"onNext",function(feature){
          updateFeature = feature;
          console.log("Next " + updateFeature.attributes.objectid);
        });


        dojo.connect(attInspector, "onDelete",function(feature){
          feature.getLayer().applyEdits(null,null,[feature]);
          map.infoWindow.hide();
        });



        map.infoWindow.setContent(attInspector.domNode);
        map.infoWindow.resize(325,210);

      }

      dojo.addOnLoad(init);

    </script>
</head>

<body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;">
      <div id="detailPane" dojotype="dijit.layout.ContentPane" region="top">
        Click a field to display the attribute inspector with customized fields.
      </div>
      <div dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center" id="mapDiv"></div>
    </div>
</body>
</html>

Re: Attribute Inspector Popup not showing up

ThaoLe — Fri, 29 Apr 2011 20:58:02 GMT

I believe the problem you are running into is with performing a query using a point. Since you are trying to select a polyline feature, the map point will never be right on the line. I think there's an issue with tolerance when performing a query on a featureservice using a point feature.

Here's the query that got executed:

http://maps.mapfactory.org/ArcGIS/rest/services/DurhamPrayer/FeatureServer/0/query?f=html&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry={%22x%22%3A-8785968.219163373%2C%22y%22%3A4298570.298927677%2C%22spatialReference%22%3A{%22wkid%22%3A102100}}&geometryType=esriGeometryPoint&inSR=102100&outFields=name%2Ctype%2Cobjectid_1%2Cprayer&outSR=102100&callback=dojo.io.script.jsonp_dojoIoScript4._jsonpCallback

If you look at the URL, no results are coming back. You may want to try using a select rather than a map click.

topic Attribute Inspector Popup not showing up in ArcGIS JavaScript Maps SDK Questions

Attribute Inspector Popup not showing up

Re: Attribute Inspector Popup not showing up