mobile app and mobile popup

RickHendrickson — Fri, 25 Oct 2013 15:55:35 GMT

Hi, I am a little desperate here. Coming from the Silverlight API and struggling with a few things. I am putting together a simple mobile app using the javascript api. I can't for the life of me get the popups to work. I know the data is coming across when the feature layer loads because I can see it in fiddler. But when I click on the feature with a desktop browser the popup appears with no data in it. On a mobile device the popup doesn't even appear. The code is pretty short so I am going to include the whole thing. Can someone let me know if something jumps out at you? Please?

Thanks so much
Rick

<!DOCTYPE html><html>         <head>         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"         />         <meta name="apple-mobile-web-app-capable" content="yes" />         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">         <title>             Campus Utilities         </title>         <!-- <link href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/mobile/themes/iphone/iphone.css"         rel="stylesheet"></link>-->         <link rel="stylesheet" href="http://jsdev.arcgis.com/3.7/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'         />         <!-- css used to customize the UI of the application -->         <link rel="stylesheet" href="css/main.css" />         <!-- stylesheet will go here -->         <!-- dojo/javascript will go here -->         <!--not sure if i need this??-->         <script>         var dojoConfig = {     mblAlwaysHideAddressBar: true     };         </script>         <script type="text/javascript" src="dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Accordion']"         , data-dojo-config="async:true">         </script>         <script src="http://jsdev.arcgis.com/3.7compact/">         </script>         <script>             // Load the widget parser and mobile base     require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile", "dojox/mobile/View", "dojox/mobile/ContentPane", "esri/InfoTemplate", "esri/map", "esri/dijit/PopupMobile", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer", "esri/sniff", "dojox/mobile/ToolBarButton", "dojo/on", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/domReady!"], function(parser, deviceTheme, on, Map, dom, registry, mobile, has, PopupMobile, PopupTemplate, FeatureLayer, InfoTemplate) {         // Parse the page for widgets!         parser.parse();                   var popup = new esri.dijit.PopupMobile(null, dojo.create("div"));                   var map = new esri.Map("map", {             basemap: "satellite",            center: [-98.57, 39.82],              zoom: 4,             slider: false,             extent: initExtent,             infoWindow: popup,             isPan: true         });         dojo.place(popup.domNode, map.root);           var IrrigationLines = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {             mode: esri.layers.FeatureLayer.MODE_ONDEMAND,             infoTemplate: popupTemplate,             outFields: ["*"]         });         //define a popup template           var popupTemplate = new esri.InfoTemplate({            title: "{STATE_NAME}",             fieldInfos: [{                fieldName: "SUB_REGION",                 label: 'SUB_REGION ',                 visible: true             }],             showAttachments: false         });           IrrigationLines.on("click", function(evt) {             map.infoWindow.setFeatures([evt.graphic]);             map.infoWindow.show(evt.mapPoint);         })         map.addLayers([IrrigationLines]);       });         </script>     </head>         <body>         <!-- application will go here -->         <div id="mapView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">             <div id="header" data-dojo-type="dojox.mobile.Heading">                 <div id="aboutButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: right;"                 moveTo="aboutView">                     About                 </div>                 <div id="legendButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: right;"                 moveTo="legendView">                     Legend                 </div>             </div>             <div id="mapContainer" data-dojo-type="dojox.mobile.ContentPane">                 <div id="map">                 </div>             </div>         </div>         <div id="aboutView" data-dojo-type="dojox.mobile.View">             <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">                 About             </h1>             <p style="padding: 5px;">                 Community College District             </p>             <div id="testtext">             </div>             <p>                 Web mapping application of campus utilities and infrastructure.             </p>         </div>         <div id="legendView" data-dojo-type="dojox.mobile.View">             <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">                 Legend             </h1>                   <div data-dojo-type="dojox.mobile.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">                 <div id="legendDiv">                 </div>             </div>         </div>     </body>   </html>

Re: mobile app and mobile popup

KellyHutchins — Fri, 25 Oct 2013 16:11:54 GMT

The reason the popup isn't appearing on the mobile device may be due to a dojo bug. The response from Derek in this post has details on how to fix the issue:
http://forums.arcgis.com/threads/94963-Javascript-API-map-3.7-has-no-coordinates-when-handling-map-click

There were a few issues with your code that were causing issues with displaying the popup. Try this code instead:

        var popupTemplate = new esri.InfoTemplate("${STATE_NAME}", "${SUB_REGION}");            var IrrigationLines = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {             mode: esri.layers.FeatureLayer.MODE_ONDEMAND,             infoTemplate: popupTemplate,             outFields: ["*"]         });

The main issue is that you were using PopupTemplate syntax with an InfoTemplate. I don't think the documentation does a good job of explaining that there are two template types and you can use either with a Popup or InfoWindow. We'll work on clarifying the doc for a future release. In the example above I switched to the InfoTemplate and specified that the title use content from the state name field and the description information from the sub region field.

Re: mobile app and mobile popup

RickHendrickson — Fri, 25 Oct 2013 16:42:51 GMT

Wow, thanks! Those two fixes worked. Still a little confused about the infotemplate but eventually I'll figure it out...with a little help from the forum.
Rick

topic Re: mobile app and mobile popup in ArcGIS JavaScript Maps SDK Questions

mobile app and mobile popup

Re: mobile app and mobile popup

Re: mobile app and mobile popup