nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

PopupTemplateContentPromise.txt.zip

IMT New Version 150x150.png

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

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:

&nbsp; <SPAN class="token function">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> options<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// do something useful</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">otherwise</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"informative error message: "</SPAN><SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">.</SPAN>message<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AshrafDar

Hi Andrew,

Could you add failure callback and log the message returned.

Regards,

Mohammad Ashraf

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).

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.

BrandonFlessner

This behavior (or lack thereof) also exists at 4.6 bug 4.x esrirequest popuptemplate

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.