cdmapper

Attribute Inspector Popup not showing up

Discussion created by cdmapper on Apr 26, 2011
Latest reply on Apr 29, 2011 by tle-esristaff
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" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <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>

Outcomes