AnsweredAssumed Answered

mobile app and mobile popup

Question asked by rickdh on Oct 25, 2013
Latest reply on Oct 25, 2013 by rickdh
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="//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>

Outcomes