JavaScript 3.4 InfoWindow with an Deferred Object

KevinFox · ‎04-03-2013

We have a JavaScript application and was converting the JavaScript 3.4 released last week. We have an InfoWindow with an Deferred Object that is similar to the ArcGIS example seen below.

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/widget_infowindowdeferred.html

Before the 3.4 upgrade this worked, now it's not working for our site as well as the sample site referred above. This happens in all browsers tested (IE, Chrome. and Firefox).

Is this a known issue?

Are there any work arounds?

http://developers.arcgis.com/en/javascript/samples/widget_infowindowdeferred/

KellyHutchins · ‎04-03-2013

Kevin,

You'll have to modify the code to use the 'old' info window. Here's an updated version of the sample that shows how to do this:


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--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></title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Kimberley", sans-serif
      } 
      #header {
       -moz-border-radius: 5px;
       border-radius:5px;
       margin:5px;
       padding-top: 4px;
       padding-right: 15px;
       background-color:#211E21; 
       color:#FFC98C; 
       font-size:16pt; text-align:right;font-weight:bold;
       border: solid 2px #2A2F30;
       height:55px;
      }
      #subheader {
        font-size:small;
        color: #cfcfcf;
        text-align:right;
        padding-right:20px;
      }
      #map {
        margin:5px;
        border:solid 4px #2A2F30;
        padding:0px;
      }
      .shadow{
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 8px 6px -6px #999;
        -moz-box-shadow: 0 8px 6px -6px #999;
        box-shadow: 0 8px 6px -6px #999;
      }
    </style>
    
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dojo.number");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.InfoWindow");
      
      var map, trailLayer;
      var template;
      var soeParams;
      var soeURL = "http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/MapServer/exts/ElevationsSOE/ElevationLayers/1/GetElevationProfile";
      
      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "../proxy/proxy.php";


        map = new esri.Map("map", {
          basemap: "satellite",
          center: [-117.069, 36.215],
          zoom: 13
        });

        var infoWindow = new esri.esri.dijit.InfoWindow({}, dojo.create("div", null, map.root));

        map.infoWindow.resize(625, 240);

        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        
        //setup SOE parameters
        soeParams = {};
        soeParams.ImageWidth = 600;
        soeParams.ImageHeight= 200;
        soeParams.BackgroundColorHex="#ffffff";
        soeParams.DisplaySegments=false;
        soeParams.f="json";
        
        
        //add the trails feature layer to the map
        template = new esri.InfoTemplate();
        template.setTitle("<b>${notes}</b>");
        template.setContent(getTextContent);
        
        trailLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/Recreation/MapServer/1", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["*"]
        });
       
       //create a new renderer for the feature layer
       var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,255,0,.70]), 5);
       trailLayer.setRenderer(new esri.renderer.SimpleRenderer(lineSymbol));
       map.addLayer(trailLayer);
       
       //add world place names to the map
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(referenceLayer);

      }

      //Generate the content for the info window when the feature is clicked.
      function getTextContent(graphic) {
        var geometry = esri.geometry.webMercatorToGeographic(graphic.geometry);
        var deferred = new dojo.Deferred();
        
        //generate elevation profile
        soeParams.InputPolyline = dojo.toJson(geometry.toJson());
        esri.request({
        url: soeURL,
        content: soeParams,
        callbackParamName: "callback",
        load: function(fset) {
           deferred.callback("<img src='" + fset.profileImageUrl + "'/>");
        },
        error: function(error) {
           deferred.errback("Error occurred while generating profile");
        }
        });
        return deferred;
      }
      dojo.ready(init);
    </script> 
  </head> 
  <body class="claro"> 
    <div id="mainWindow" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%; height:100%;">

      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        Click a trail to view the elevation profile
      </div>

      <div id="map" data-dojo-type="dijit.layout.ContentPane" class="shadow" data-dojo-props="region:'top'"></div>

   </div>
  </body> 
</html>