BritishSteel

Attribute Inspector ??? Edits Not Working

Discussion created by BritishSteel on Nov 7, 2013
Latest reply on Nov 8, 2013 by BritishSteel
Hi everyone,

I am using the attribute inspector to add records to a table. When you click on a parcel the attribute inspector will open, the user can enter values, and the newly entered values should write to a table. It all seems to work fine to a certain extent; I looked at it in fiddler and the apply edits is coming back successfully, but it does not seem to take it after all. I have attached my script and I would appreciate any advice on how to tackle this issue. Could it be linked to not using a proxy page?

<!DOCTYPE html>
<html>
<head>
  
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  
  <title>Attribute Inspector</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 250px;
    }

    .esriAttributeInspector .dijitTextBox {
      width: 10em;
    }

    .esriAttributeInspector .atiLayerName {
      display: none;
    }

    .esriAttributeInspector .atiLabel {
      font-weight: bold;
      color: #705B35;
    }

    .esriAttributeInspector .atiField {
      background: #FFF6D9;
    }

    .esriAttributeInspector .atiButtons {
      color: #705B35;
    }
  </style>

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
    var map, operationalLayer;

    require([
      "esri/map", "esri/layers/FeatureLayer", 
      "esri/tasks/query",
   "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Legend",
   "esri/dijit/AttributeInspector",
      "esri/config",
      "dojo/dom",
   "dojo/parser",
   "dojo/_base/Color",
   "esri/dijit/editing/Editor",
   "dojo/_base/array",
      "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dijit/layout/AccordionContainer",
      "dojo/domReady!"
   
    ], function(
      Map,
   FeatureLayer,
      Query,
   SimpleFillSymbol,
      Legend,
   AttributeInspector,
      esriConfig,
      dom,
   parser,
   Color,
   Editor,
   arrayUtils
   
    ) {
      parser.parse();
      //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.
      //esriConfig.defaults.io.proxyUrl = "http://msgis-c23-03/Test/proxy.php";
      
      map = new Map("map", {
        basemap:"topo",
        //center :[-118.407, 34.452],
        //zoom   :13
  center :[-118.185, 33.8748],
        zoom   :18
      });


   
      //parcelLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/FeatureServer/9", {
      //  mode: FeatureLayer.MODE_ONDEMAND,
      //  outFields: ["station_id", "lithology_type", "metamorphic_facies", "geomodifications", "objectid"]
      //});

      parcelLayer = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["Id", "Name"]
      });

      parcelTable = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["OBJECTID", "Location", "Event", "Date", "YouTube", "Press"]
      });   

   
      var symbol = new SimpleFillSymbol().outline.setColor(new Color([0, 255, 0, 1])).setWidth(5);
      parcelLayer.setSelectionSymbol(symbol);

   
 
 
      map.on("layers-add-result", function(results) {
        //add the legend
        //var legend = new Legend({
        //  map: map,
        //  layerInfos: [{ 
        //    layer: parcelLayer, 
        //    title: ""
        //  }]
        //}, "legendDiv");
        //legend.startup();
  var layerInfos = [{
          featureLayer: parcelTable,
          showAttachments: false,
          isEditable: true,
          showDeleteButton: false,
          fieldInfos: [
            { fieldName: "OBJECTID", tooltip: "The station id.", label: "OBJECTID:", isEditable: true },
            { fieldName: "Location", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Event", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Date", tooltip: "The lithology type of the rock unit", label: "Date", isEditable: true },
            { fieldName: "YouTube", tooltip: "The lithology type of the rock unit", label: "YouTube", isEditable: true },
            { fieldName: "Press", tooltip: "The lithology type of the rock unit", label: "Press", isEditable: true }
          ]
        }];
   
  var selectQuery = new Query();
  parcelLayer.on("click", function(e){
        dom.byId("details").innerHTML = "";
        // console.log(e.graphic);
        selectQuery.objectIds = [e.graphic.attributes.OBJECTID];
        parcelTable.selectFeatures(selectQuery);
      });
        
  var attInspector = new AttributeInspector({
          layerInfos: layerInfos
        }, "attributesDiv");
  
  attInspector.on("attribute-change", function(evt) {
  var feature = evt.feature;
  feature.attributes[evt.fieldName] = evt.newFieldValue;
  feature.getLayer().applyEdits(null, [feature], null);
  
  });
  
      });
   
 
 
   map.addLayers([parcelLayer]);
   map.addLayers([parcelTable]);
      
   
  
 ///
    
        
   
   
   
   
    });
  </script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:&apos;headline&apos;, gutters:true" style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;right&apos;">

    <div data-dojo-type="dijit/layout/AccordionContainer">
 
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:&apos;Details&apos;, selected:true">
    <span id="details">Click a geology outcrop to view details.</span>

    <div id="attributesDiv"></div>
      </div>
   
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:&apos;Legend&apos;">
    <div id="legendDiv"></div>
      </div>


   
    </div>
 
 <div id="editorDiv"></div>
 
 
  </div>
  <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;center&apos;" style="overflow:hidden;">
  </div>
</div>
</body>
</html>


Thank you for your help.

PS: the script is based on the following sample, in case that helps.

Attachments

Outcomes