PopupTemplate JavaScript promise for the contents is never being executed.

[AndrewPage1]

Summary:

My PopupTemplate JavaScript promise for the contents is never being executed.

My Requirements:

I am attempting to code a feature that will allow the user to click on a graphic in a Feature Layer and see a popup. We have integrated the map into our ASP.Net MVC web application using the JavaScript 4.5 API.

I have coded the popup in JavaScript as a Popup Template. When the user clicks on a graphic (that will represent a map pin-point), I need the code to do an (asynchronous) AJAX HTTP GET to an endpoint in order to retrieve a JSON object. The object will contain some data that will be displayed in the popup.

I have assigned the 'content' property of my PopupTemplate to my JavaScript function that returns a promise.

My Problem:

It appears that the promise is never being executed, as breakpoints in my code within the promise are never hit. 

I have tried several ways to code the promise with no success. I am using esriRequest to actually do the AJAX GET, and returning the promise from this as the function assignment. Please see my attached code.

I think the JavaScript API is just executing my function and ignoring the promise that I am returning.

[AshrafDar]

Hi Andrew,

Are you adding esriRequest as AMD? because cannot see the esriRequest module is loaded anywhere in your code.

Also is the code before esriRequest executing?

Regards,

Mohammad Ashraf

[AndrewPage1]

Further up in the code (not uploaded to you) I am loading the esriRequest as follows:

require([
"esri/Map",
...
"esri/request",
"dojo/Deferred"
], function (Map, ... esriRequest, Deferred) {

The esriRequest and Deferred objects are in-scope to the functions I have uploaded to you.

The code before the esriRequest is executing ok (each time that the user clicks a map point / graphic).

[RobertScheitlin__GISP]

Andrew,

  You can try using otherwise to see if the esriRequest is failing:

  esriRequest(url, options).then(function(response) {
    // do something useful
  }).otherwise(function(error){
    console.log("informative error message: ", error.message);
  });‍‍‍‍‍‍‍‍‍‍

[AndrewPage1]

Thanks for your responses.

I have tried the exact block of code above with 'otherwise' and neither the 'then' nor the 'otherwise' are ever called. No request is actually made (according to the Chrome Network tab). It seems that the code that calls my function (buried in the API) never calls the promise I am returning (as far as I can see).

[RobertScheitlin__GISP]

Andrew,

  Based on this sample: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popuptemplate-... 

The esriRequest is a Promise return type so you need to do something like this:

function setPopupContent(target) {
  var locationId = target.graphic.attributes.ObjectID;
  var url = urlGetLocationExtendedPointsData + '/' + locationId;
  var options = {
    query: {
      f: 'json'
    },
    responseType: 'json'
  };

  return esriRequest(url, options).then(function(response) {
    // THIS CODE IS NEVER EXECUTED!
    var source = $("#map-popup-content-template").html();
    var template = Handlebars.compile(source);
    var context = { RiskQualityChartTitle: "Chart title" }
    var html = template(context);
  });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AshrafDar]

Hi Andrew,

Could you add failure callback and log the message returned.

Regards,

Mohammad Ashraf

[AndrewPage1]

I have just tried setting the block to be as below:

function setPopupContent(target) {
var locationId = target.graphic.attributes.ObjectID;
var url = urlGetLocationExtendedPointsData + '/' + locationId;
var options = {
query: {
f: 'json'
},
responseType: 'json'
};

return esriRequest(url, options).then(function (response) {
// THIS CODE IS NEVER EXECUTED!
var source = $("#map-popup-content-template").html();
var template = Handlebars.compile(source);
var context = { RiskQualityChartTitle: "Chart title" }
var html = template(context);
return html;
});
}

The block starting 'THIS CODE IS NEVER EXECUTED' is still never executed, with no message appearing in the console.

[RobertScheitlin__GISP]

Andrew,

  I would try making your code more like the sample as far as defining the popupTemplate when you create the layer:

        // USA counties layer
        var countiesLayer = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties/FeatureServer/0",
          outFields: ["*"],
          minScale: 0,
          maxScale: 0,
          renderer: null,
          // create a new popupTemplate for the layer
          popupTemplate: { // autocasts as new PopupTemplate()
            title: "County of {NAME}",
            content: queryBlockGroups
          }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndrewPage1]

I have just tried this - and there is no difference. Thanks anyway. Any other suggestions?