Using PopupMobile with AttributeInspector- cannot edit

DavidGolden · ‎03-29-2014

I have just about no javascript experience and I'm trying to develop a web app that will allow a user to edit feature attributes from a mobile device. I previously had it configured to use infoWindow and AttributeInspector so that the user could view and edit attributes, save them to the server with a save button, and then run a geoprocessing service from a button viewed within the infoWindow but created within attributeInspector. I just figured out how to transition infoWindow into popupMobile but now the attributes are no longer editable and my buttons are gone. Is there any way to configure this so that popupMobile calls upon attributeInspector when creating the form? Here's my code:

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css" />
    <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css'/>
    <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/PopupMobile.css'/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

    <style>
      html, body { 
        height: 100%; width: 100%; 
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #mapDiv{
        margin: 0;
        padding:0;
      }
      #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:250px;}
      .esriAttributeInspector .atiLayerName {display:none;}
      .saveButton {
        padding-left:45px;
         margin:0px;width:16px; height:16px;
       }
    </style>
    
    <script src="http://js.arcgis.com/3.8/"></script>

    <script>
      var map;
      var updateFeature;
      
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/AttributeInspector",
        
        "esri/dijit/PopupMobile",
        "esri/dijit/PopupTemplate",
        "esri/InfoTemplate",

        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "dojo/_base/Color",

        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/config",

        "esri/tasks/query",
        
        "dojo/parser", 
        "dojo/dom-construct",
        "dijit/form/Button",
        "esri/tasks/Geoprocessor",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, AttributeInspector,
        PopupMobile, PopupTemplate, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol, Color,
        ArcGISDynamicMapServiceLayer, esriConfig,
        Query,
        parser, domConstruct, Button, Geoprocessor
      ) {
        parser.parse();

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy";

        var popup = new PopupMobile(null, domConstruct.create("div"));
        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.144,40.1443],
          zoom: 18,
          infoWindow: popup
        });
        
        map.on("layers-add-result", initSelectToolbar);

            var popupTemplate = new esri.dijit.PopupTemplate({
              title: "Enter Data",
              fieldInfos: [
               { fieldName: "Date", visible: true, isEditable: true, label: "Date" },
               { fieldName: "Height", visible: true, label: "Height" },
               { fieldName: "Comp", visible: true, label: "Comp" },
               { fieldName: "FenceID1", visible: true, label: "FenceID1" },
               { fieldName: "FenceID2", visible: true, label: "FenceID2" },
               { fieldName: "FenceID3", visible: true, label: "FenceID3" },
               { fieldName: "FenceID4", visible: true, label: "FenceID4" }
             ],
             showAttachments: true,
             isEditable: true
            });

        var MapServiceMSL = new ArcGISDynamicMapServiceLayer("http://gisservertest:6080/arcgis/rest/services/Pasture_Data/MapService/MapServer");
        MapServiceMSL.setDisableClientCaching(true);
        map.addLayer(MapServiceMSL);

        var RandomPointFL = new FeatureLayer("http://gisservertest:6080/arcgis/rest/services/Pasture_Data/MapService/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate: popupTemplate,
          outFields: ["Date","Height","Comp","FenceID1","FenceID2","FenceID3","FenceID4"]
        });
        var selectionSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL, 
          new SimpleLineSymbol(
            "solid", 
            new Color("yellow"), 
            2
          ),
          null
        );
        RandomPointFL.setSelectionSymbol(selectionSymbol);

        RandomPointFL.on("edits-complete", function() {
          MapServiceMSL.refresh();
        });

        map.addLayers([RandomPointFL]);

        function initSelectToolbar(evt) {
          var RandomPointFL = evt.layers[0].layer;
          var selectQuery = new Query();

          map.on("click", function(evt) {
              var tolerance = 30,
                 pxWidth = map.extent.getWidth() / map.width,
                 padding = tolerance * pxWidth;
                 queryGeometry = new esri.geometry.Extent({
                 'xmin': evt.mapPoint.x - padding,
                  'ymin': evt.mapPoint.y - padding,
                  'xmax': evt.mapPoint.x + padding,
                  'ymax': evt.mapPoint.y + padding,
                 'spatialReference': evt.mapPoint.spatialReference
          });
            selectQuery.geometry = queryGeometry;

            RandomPointFL.selectFeatures(selectQuery, 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();
              }
            });
          });

          map.infoWindow.on("hide", function() {
            RandomPointFL.clearSelection();
          });

          var attInspector = new AttributeInspector({
            layerInfos: popupTemplate
          }, domConstruct.create("div"));
          //add a save button next to the delete button
          var saveButton = new Button({ label: "Save",
                                        onClick:function(){
                                      updateFeature.getLayer().applyEdits(null, [updateFeature], null);         
          },"class": "saveButton"});
          domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
          
          attInspector.on("attribute-change", function(evt) {
            //store the updates to apply when the save button is clicked 
            updateFeature.attributes[evt.fieldName] = evt.fieldValue;
          });

          var geoprocessor = new Geoprocessor("http://gisservertest:6080/arcgis/rest/services/Pasture_Data/ProcessDataDB/GPServer/ProcessDataDB");
          
          var processButton = new Button({ label: "Process",
                                            onClick: function(){
                                              geoprocessor.submitJob(null);
                                            }, 
                                            "class": "processButton"});
          domConstruct.place(processButton.domNode, attInspector.deleteBtn.domNode, "after");

          map.infoWindow.setContent(attInspector.domNode);
          map.infoWindow.resize(350, 240);
        }
      });
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
      <div id="detailPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        Select RandomPoint to begin data entry.
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="mapDiv"></div>
    </div>
  </body>
</html>