arcgisUtils.createMap with InfoWindow for deferred content

F__DeWayneLane

Using arcgisUtils.createMap method.

Specifying the InfoWindow instead of Popup in mapOptions, because we need to setContent with a deferred

Problem:  Throwing an error when clicking the graphic. (TypeError: c.clearFeatures is not a function)

A simple example http://jsbin.com/vifah/1/

Question 1: Is it possible to use arcgisUtils.createMap and InfoWindow instead of Popup?

Question 2: Is it possible to set deferred content in a Popup?

Thanks

DeWayne

F__DeWayneLane

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();
    });
});