Popup InfoWindow with deferred results not working in IE (works in Chrome/FF)

ChrisEaton — Sat, 11 Dec 2021 18:49:32 GMT

I'm working on a page that has some points drawn on it based on information out of a database table (not a map layer, I don't have access to a map layer for this data for technical reasons). I can display the points just fine. When I click on one, the code goes back to the server to load some slower loading data and displays the Popup InfoWindow with that information. In Chrome and Firefox, this works really well. I get a "searching" popup, and then the results appear when available.

In IE 11, I get the results display instantly, even before it's sent the request for the results. That means it doesn't show the results, since they aren't available yet. If I click the same point a second time, the results are there (as I assign them to the graphic's attributes).

Here's the relevant part of the code. I'd appreciate any suggestions on why IE is behaving so differently and what I can do about it. This is on 3.13 of the ArcGIS API.

Thank you.

 var app = {};


        // Set up the stations array for later.
        app.stationDetails = new Array();


        app.stationDetails.push({name: "Customs Building", 
            id: 1,
            owner: "owner", 
            active: "True", 
            type: "industrial", 
            lat: 45.269722, 
            lon:-66.061389, 
            address: "",
            url: "/en/SamplingLocation/Details/1"});
        app.stationDetails.push({name: "Forest Hills", 
            id: 2,
            owner: "owner", 
            active: "True", 
            type: "industrial", 
            lat: 45.308778, 
            lon:-66.008333, 
            address: "",
            url: "/en/SamplingLocation/Details/2"});
        app.stationDetails.push({name: "West Side Station", 
            id: 3,
            owner: "owner", 
            active: "True", 
            type: "industrial", 
            lat: 45.253150, 
            lon:-66.079931, 
            address: "",
            url: "/en/SamplingLocation/Details/3"});


            // function to use when loading info template data.
            function getInfoTemplateContent(graphic) {
                console.log('Loading popup data');


                //We have a copule of properties that are more expensive to load, so we'll load them with json only when needed.
                var jsonUrl = "/en/SamplingLocation/LocationMapDetails/?type=1&id=" + graphic.attributes.ID;
            var request = esriRequest({
                url: jsonUrl,
                callbackParamName: "callback",
                content: { f: "json" },
                handleAs: "json"
            });
            request.then(
                function(response) {
                    graphic.attributes.LASTRESULT = response.lastSampleDate;
                    graphic.attributes.POLLUTANTS = response.sampledParameters;
                },
                function(error) {
                    console.error('Error loading infoTemplate data: ' + error);
                    graphic.attributes.LASTRESULT = 'Not Available';
                    graphic.attributes.POLLUTANTS = 'Not Available';
                });
            return request;
        }


        app.infoWindow = new Popup({ zoomFactor: 2 }, domConstruct.create("div"));
        app.infoWindow.startup();
        map.setInfoWindow(app.infoWindow);


        // set up the info template.
        app.infoTemplate = new InfoTemplate();
        app.infoTemplate.setTitle("${NAME}");
        app.infoTemplate.setContent("<tr>Owner: <td>${OWNER}</td></tr>" +
            "<br><tr>Last Result: <td>${LASTRESULT}</td></tr>" +
            "<br><tr>Pollutants: <td>${POLLUTANTS}</td></tr>" +
            "<br><tr>Civic Address: <td>${ADDRESS}</td></tr>" +
            "<br><a href='${URL}'>View Concentrations</a>");




        map.on("load", function() {
            map.graphics.enableMouseEvents();
            map.graphics.on("click", function(event) {
                var graphic = event.graphic;
                var deferred = getInfoTemplateContent(graphic);
                map.infoWindow.setFeatures([deferred]);
                map.infoWindow.show(event.mapPoint);
            });


            var points = [];
                points.push(new Point(2534421.28, 7363357.14, new SpatialReference({ wkid: 2953 })));
                points.push(new Point(2538558.23, 7367722.05, new SpatialReference({ wkid: 2953 })));
                points.push(new Point(2532975.85, 7361507.51, new SpatialReference({ wkid: 2953 })));




            for (var i = 0; i < points.length; i++) {
                var temp = points;
                temp.attributes = {};
                // apply attributes
                temp.attributes.ID = app.stationDetails.id;
                temp.attributes.NAME = app.stationDetails.name;
                temp.attributes.OWNER = app.stationDetails.owner;
                temp.attributes.URL = app.stationDetails.url;
                temp.attributes.ADDRESS = app.stationDetails.address;


                var symbol = app.industrialActiveSymbol;
                var graphic = new Graphic(temp, symbol, temp.attributes, app.infoTemplate);
                //var graphic = new Graphic(temp, symbol, temp.attributes);
                app.map.graphics.add(graphic);
            }
        });
        


        });

topic Popup InfoWindow with deferred results not working in IE (works in Chrome/FF) in ArcGIS JavaScript Maps SDK Questions

Popup InfoWindow with deferred results not working in IE (works in Chrome/FF)