AnsweredAssumed Answered

AttributeInspector "No features selected"

Question asked by correaj on Aug 28, 2013
Latest reply on Aug 28, 2013 by geonetadmin
Hello All,

I am trying to follow along some ArcGIS JavaScript API samples for my app. I have replaced their layers with mine along with some of the attribute info for the AttributeInspector widget. Everything works except the most essential part of my app, the AttributeInspector window. I cannot figure out why my fields don't display on the right pane of my page.  The text in the details pane will actually change its title which indicates that it listens to the click event. However no attributes show. The legend, shows, but not the attribute inspector. I've debugged and every object is stable, including the attributeinspector which contains the featurelayer object it should correspond with. Why doesn't this work?

ESRI, doesn't really explain much of this widget. Their documentation lacks detail. There are no best practices for different implementations of building a map (via esri.Map or esri.arcgis.utils.createMap) and using specific widgets for a particular implementation.  Anyway, here is a photo before and after result with code.

[ATTACH=CONFIG]27051[/ATTACH]
[ATTACH=CONFIG]27052[/ATTACH]
Here is the relevant javascript code:

-------------------------------------------------------------------------------------------------------------

/**
* Created with IntelliJ IDEA.
* User: jcorrea
* Date: 8/1/13
* Time: 1:18 PM
* To change this template use File | Settings | File Templates.
*/


/* require statements */
dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("esri.tasks.QueryTask");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.AttributeInspector-all");
dojo.require("esri.arcgis.utils");

dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.layers.Field");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.dijit");
dojo.require("dijit.dijit-all");
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");




/* proxy workaround */
esri.config.defaults.io.proxyUrl = location.protocol.toString() +
    "//" + location.host.toString() +
    location.pathname.toString().replace('index.html', '') + "proxy.ashx";

/* variables */
var townshipLayer;
var map;
var currentState = "ND";
var activeCounty;
var ndOperationalLayer;
var attInspector;



/**
* All functions for map
* interaction and data loading **/
function init() {

    map = new esri.Map("map", {
        basemap:"topo",
        center :[-98.882818, 48.116371],
        zoom   :13
    });

    ndOperationalLayer = new esri.layers.FeatureLayer("http://xyz-services.esri.com/arcgis/rest/services/AFOLDER/PATracking/FeatureServer/1", {
        mode     :esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
    });

   

   dojo.connect(map, 'onLayersAddResult', function (results) {
        //add the legend
        var legend = new esri.dijit.Legend({
            map       :map,
            layerInfos:[
                {layer:ndOperationalLayer, title:""}
            ]
        }, "legendDiv");
        legend.startup();

        attInspector = new esri.dijit.AttributeInspector({layerInfos:[{'featureLayer':ndOperationalLayer}]}, "attributeEdit" );

        attInspector.on("attribute-change", function(evt) {
            var feature = evt.feature;
            feature.attributes[evt.fieldName] = evt.newFieldValue;
            feature.getLayer().applyEdits(null, [feature], null);
        });

        attInspector.startup();


    });

    var selectQuery = new esri.tasks.Query();

    dojo.connect(map, "onClick", function (evt) {
        dojo.byId('details').innerHTML = 'Map Site';
        selectQuery.geometry = evt.mapPoint;
        ndOperationalLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, null);
        //attInspector.startup();

    });

    map.addeLayers([ndOperationalLayer]);





}
/* init() */

-----------------------------------------------------------------------------------------------------------------

Here is the html
-----------------------------------------------------------------------------------------------------------------
<%--
  Created by IntelliJ IDEA.
  User: jcorrea
  Date: 8/12/13
  Time: 3:12 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Region VIII PA Tracker</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles/main.css"/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>

    <script type="text/javascript">djConfig = { parseOnLoad: true };</script>

    <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/esri/css/esri.css" data-dojo-config="parseOnLoad: true"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/dojo/dijit/themes/claro/claro.css"
            data-dojo-config="parseOnLoad: true">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5"
            data-dojo-config="parseOnLoad: true"></script>
    <script type="text/javascript" src="/scripts/arcscripts1.js"></script>
</head>

<style>
    html, body {
        height: 97%;
        width: 98%;
        margin: 1%;
        font-family: Verdana;
    }

    #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>

<body class="claro">

<div id="master" class="claro">
    <header>

        <h1>FEMA - Region 8 PA Tracker</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Devil's Lake Viewer</a></li>
            <li><a href="#">Tutorials</a></li>
        </ul>
    </nav>


    <form class="claro">

        <b>State:</b>
        <select id="state" data-dojo-type="dijit.form.ComboBox" name="state" onchange="callStateCounties(this.value)">
            <option selected></option>
            <option>North Dakota</option>
            <option>South Dakota</option>
        </select>

        <b>County:</b>
        <select id="cbCounty" data-dojo-type="dijit.form.ComboBox"
                onchange="queryTownship(this.value)"
                fetchProperties="{sort:[{attribute:'name', descending:false}]}">
        </select>


        <b>Township:</b>
        <select id="township" data-dojo-type="dijit.form.ComboBox" name="township"
                fetchProperties="{sort:[{attribute:'name', descending:false}]}"
                onchange="zoomToTownship(this.value)">
        </select>

    </form>

    <div id="wrap"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline', gutters:true">

        <div id="rightPane"
             data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props="region:'right'">

            <div data-dojo-type="dijit.layout.AccordionContainer">
                <div data-dojo-type="dijit.layout.ContentPane"
                     data-dojo-props="title:'Details', selected:true">
                    <span id="details">Click a point to edit attributes.</span>
                    <div id="attributeEdit"></div>



                </div>
                <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
                     data-dojo-props="title:'Legend'">
                    <div id="legendDiv"></div>
                </div>
            </div>
        </div>
        <div id="map"
             data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props="region:'center'"
             style="overflow:hidden;">
        </div>
    </div>

</div>

</body>
</html>
----------------------------------------------------------------------------------------------------------------------

Attachments

Outcomes