Not sure I understand everything I know about the InfoWindow/Popup and deferred content, but I do have something working...Quetions from previous post:Q1: Yes, but not if you want to use a deferred to set the content. When the map is created with arcgisUtils.createMap(), there will now be a call to clearFeatures() and setFeatures() when the InfoWindow shows. These methods are not available on InfoWindow, they are only on the newer Popup.Q2: Sort of. An example of my approach is available at http://jsbin.com/hariw/1/. While viewing the console, click one of the markers. After 1000ms you will see the content change simulating the response from a service.Couple of things I need help understanding:1 - There is a difference in the behavior of the InfoWindow when the response returns in <300ms. Longer than 300ms, the loading text is replaced with the infoTemplate content, then when the service finally returns, the content is updated with the data from the response. How can I display "loading" text until the service returns???2 - What is happening at the 300ms after the click that changes the InfoWindow content?3 - Is there a better way to set dynamic content in the Popup?
var map,
layer,
webmapId = "d5e02a0c1f2b4ec399823fdd3c2fdebd";
require([
"dojo/_base/array",
"dojo/_base/Color",
"dojo/_base/lang",
"dojo/dom-construct",
"esri/graphic",
"esri/map",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/InfoTemplate",
"esri/lang",
"esri/layers/GraphicsLayer",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"], function (array, Color, lang, domConstruct, Graphic, Map, arcgisUtils, Legend, Extent, Point, InfoTemplate, esriLang, GraphicsLayer, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol) {
//mock data
var jobs = [{
id: "1",
display: "Job 1",
x: -49429959.47094255,
y: 4290323.197178331
}, {
id: "2",
display: "Job 2",
x: -49417505.01264635,
y: 4294429.895955721
}];
createGraphicsLayer = function () {
console.log("createGraphicsLayer()");
layer = new GraphicsLayer();
var infoTemplate = new InfoTemplate("Job:: ${id}", "Job:: ${display} <br> ${realTimeA} <br> ${realTimeB}");
var outlineColor = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("snow"), 2);
var marker = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, outlineColor, new Color([247, 127, 0, 0.85]));
array.forEach(jobs, function (job) {
var point = new Point(job.x, job.y, map.spatialReference);
var attribute = {
"id": job.id,
"display": job.display
};
var graphic = new Graphic(point, marker, attribute, infoTemplate);
layer.add(graphic);
});
map.addLayer(layer);
layer.show();
//Get and display dynamic data when user selects graphic
layer.on('click', function (evt) {
map.infoWindow.hide();
map.infoWindow.setContent(null);
map.infoWindow.setContent("Loading...");
map.infoWindow.show(evt.mapPoint);
//simulation of request to get dynamic data
//id from graphic used as a request param (evt.graphics.attributes.id)
setTimeout(function () {
var d = new Date();
var curr_sec = d.getSeconds();
var curr_msec = d.getMilliseconds();
currentTime = curr_sec + ":" + curr_msec;
console.log("async response from service " + currentTime);
//mock response for job2 from service
var response = {
realTimeA: "currentA for Job1 " + currentTime,
realTimeB: "currentB for Job1 " + currentTime
};
//mock response for job2 from service
if (evt.graphic.attributes.id === "job2") {
response = {
realTimeA: "currentA for Job2 " + currentTime,
realTimeB: "currentB for Job2 " + currentTime
};
}
//update the graphic with real-time data from service
lang.mixin(evt.graphic.attributes, response);
map.infoWindow.setContent(esriLang.substitute(evt.graphic.attributes, evt.graphic.infoTemplate.content));
map.infoWindow.show(evt.mapPoint);
// <300ms acts differently that >300ms. What am I missing????
}, 1000);
});
};
arcgisUtils.createMap(webmapId, "mapDiv", {
mapOptions: {
"extent": new Extent({
xmax: -49396857.46038077,
xmin: -49444133.762375094,
ymax: 4302199.600448086,
ymin: 4280873.66955655,
spatialReference: {
wkid: 102100
}
})
}
}).then(function (response) {
map = response.map;
//create graphics static data
createGraphicsLayer();
});
});