dojo.deferred not returning correctly per Esri sample example

5996
8
10-04-2013 07:29 AM
Jay_Gregory
Occasional Contributor III
I am following the instructions here:

My function:
function getContent(graphic) {
        var deferred = new dojo.Deferred();
        facID = graphic.attributes.FacilityID;
        console.log(facID);
        deferred = esri.request({
        url: "http://myserver.com/arcgis/rest/services/EON/Assets/MapServer/0/query",
        content:{
              where: "LocationID = '" + facID + "'",
              outFields: "*",
              f: "json"
           },
        callbackParamName: "callback",
        load: function(fset) {
           console.log(fset);
           deferred.callback("blahhh");
        },
        error: function(error) {
           deferred.errback("Error occurred while generating profile");
        }
        });
       return deferred;
  
      }


generates an error at the "return deferred" line.  The error is "Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."

What do I need to do to make this work?
0 Kudos
8 Replies
TracySchloss
Frequent Contributor
To me, the whole point of the example is that the infowindow contains a very complex graphic and you have to wait for it to generate before you can use it.  In your example it looks like you're just executing a simple queryTask.  I think you should be working from a queryTask example instead.
0 Kudos
ReneRubalcava
Frequent Contributor
When you do
var deferred = new dojo.Deferred();

you need to return the promise.
return deferred.promise;

For reference
http://dojotoolkit.org/reference-guide/1.9/dojo/Deferred.html

esri.request already returns a promise, so don't use deferred = new dojo.Deferred();
Just do
var deferred = esri.request();

https://developers.arcgis.com/en/javascript/jsapi/namespace_esri-amd.html#request
0 Kudos
Jay_Gregory
Occasional Contributor III
Basically I'm trying to populate some info window content with the attributes from another feature service.  I wasn't able to get it working use either of those suggestions.  Any others I might try?

Tracy: This code doesn't seem to work as intended either:
function getContent(graphic) {
       var facID = graphic.attributes.FacilityID;
       console.log(facID);
        var queryTask = new esri.tasks.QueryTask("http://myserver:6080/arcgis/rest/services/EON/Assets/MapServer/0");
        var query = new esri.tasks.Query();
        query.where = "LocationID = '" + facID + "'"
        query.outFields = ['*'];
        queryTask.execute(query,success,failure);
      }
      function success(data){
        var attributes = data.features[0].attributes;
        var name = attributes.FullName;
        var flDaily = attributes.FlDaily;
        var artcc = attributes.BoundaryATRCCComputerID;
        var url = attributes.URL2;
        var type = attributes.UseType;

        var content = name + "<ul><li><b>Daily Flight: </b>" + flDaily.toString() + "</li><li><b>ARTCC: </b>" + artcc + "</li><li><b>Type: </b>" + type + "</li></ul><a href = '" + url + "'>More Info </a>"
        template.setContent(content);
      }
      function failure(error){
        console.log(error);
      }
}


The first info window doesn't display anything, and each subsequent info window displays what the first info window should have.
I'm calling it like this:
 template = new esri.InfoTemplate();
        template.setTitle("Code: ${FacilityID}");
        template.setContent(getContent);
 

Rene, unfortunately your suggestion didn't seem to fix the problem.
function getContent(graphic) {
facID = graphic.attributes.FacilityID;console.log(facID);
        var deferred = esri.request({
        url: "http://myserver:6080/arcgis/rest/services/EON/Assets/MapServer/0/query",
        content:{
              where: "LocationID = '" + facID + "'",
              outFields: "*",
              f: "json"
           },
        callbackParamName: "callback",
        handleAs: "json"});
        
        deferred.then(
           function(response) {
            console.log("Success: ", response);
            deferred.callback("testing");
  }, function(error) {
      console.log("Error: ", error);
  });
        return deferred.promise;
}

The deferred.then section works, but trying to return deferred.promise still generates an error.

Any other thoughts?
0 Kudos
ReneRubalcava
Frequent Contributor
There's a slight typo in that original code sample.
new esri.esri.dijit.InfoWindow
should be
new esri.dijit.InfoWindow
This works.

<!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, IE=10">
    <!--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://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/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://js.arcgis.com/3.7/"></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.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>

0 Kudos
HaroldBostic
Occasional Contributor II
Hello, this appears to work fine for featureLayers, however, I am trying to set the InforTemplate for individual graphics and this does not appear to work.

This works

var template = new esri.InfoTemplate();
                                            template.setTitle(identifyResultTemplates[result.layerName].title);

                                            template.setContent(mapcontext.getSitePhotos)


where mapcontext.getSitePhotos:
function getSitePhotos()
    {
       
        

        return 'Hello';
    }


but if I change the same function to return a deferred, the Infowindow does not populate:
function getSitePhotos()
    {
        var deferred = new dojo.Deferred();

        setTimeout(function () {
            deferred.callback('Hello');
            
        }, 2000);
        

        return deferred;
    }


Any clues as to what could be going wrong?
0 Kudos
HaroldBostic
Occasional Contributor II
My issue is Popup don't support deferreds as stated here https://developers.arcgis.com/en/javascript/jshelp/intro_popuptemplate.html
0 Kudos
MarkTurnbull
New Contributor III

Can anyone provide confirmation that functions that return deferreds are or are not supported by the setContent method of the popupTemplate in ArcGIS API for Javascript v 3.12 ?

Thanks

0 Kudos
kaleem_anjum
New Contributor

what is the alternate  for dojo.Deferred in 4.x ? 

var deferred = new dojo.Deferred();

0 Kudos