AttributeInspector "No features selected"

[JohnCorrea]

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

[Anonymous User]

Original User: SmithPeterA

Peter,

The code snippet has the objectid field hard-coded into it. In the earlier snippet the objectid field was named ID. For the geology layer its objectid. Here's a fiddle showing the code working with the geology layer.
http://jsfiddle.net/xBDKb/13/

Kelly, that solved my problem with the geology layer and with my points layer!  It reminded me to keep aware of what the objectid field is named.   Thanks

Peter