Using function for infoTemplate, content is for the wrong feature, only in IE

[TracySchloss]

In my project, I am using the click event of a featureLayer to executes the function setWindowContent for its infoTemplate.  Within that function, it runs a queryAttachmentInfos to get the first image, so I can include it in the tag too.

This works fine in Chrome.  In IE, the first time I click a feature, I receive an infoWindow with the right contents, but it doesn't use the format function. It displays output as if you set your content as ${*}.    Once you click again and for all subsequent clicks, then the format is correct, but the contents are wrong, it's "off" at least one.  The information is actually from a feature before, not the one I've just clicked.  It doesn't seem to even be just the previous one, sometimes it's two clicks off.

Can someone help me fix what I'm sure is a scope problem?  I'm testing this in IE 11.

JS Bin - Collaborative JavaScript Debugging

[TracySchloss · Accepted solution]

When I looked at the attributes of the selected feature, they were correct, there was just some issue with using infoTemplate. 

I removed infoTemplate as a parameter from my featureLayer, and switched to using just map.infoWindow.  It still looks the same, but now it's right in both Chrome and IE.

     on(featureLayer, "click", function(evt){

       map.infoWindow.hide();

       formatString = "";

       var  objectId = evt.graphic.attributes[featureLayer.objectIdField];

       selectQuery.objectIds = [objectId];

       featureLayer.selectFeatures(selectQuery);     

     });

    on(featureLayer, 'selection-complete', setWindowContent);

function setWindowContent(results){

     var imageString = "<table><tr>";

     var imageStyle = "alt='site image' style='height=:40px width:40px float:left'";

     var deferred = new Deferred;

      var graphic = results.features[0];

      var  objectId = graphic.attributes[featureLayer.objectIdField];

      featureLayer.queryAttachmentInfos(objectId).then(function(response){

          var imgSrc;

          if (response.length === 0) {

              deferred.resolve("no attachments");

          }

          else {

              imgSrc = response[0].url;

              imageString += "<td><img src='" + imgSrc + "' " + imageStyle + "></td>";

              formatString += imageString;

              domConstruct.empty("attachPreviewDiv");

              domConstruct.create("img", {

                  src: imgSrc

              }, "attachPreviewDiv");

          }

          formatString += "<td><b>" + graphic.attributes.Facility + "</b><br/>" + graphic.attributes.Address + "<br/>" +

          graphic.attributes.City +

          ", " +

          graphic.attributes.State +

          "<td></tr></table>";

     //     console.log(formatString);

           map.infoWindow.setContent(formatString);

           map.infoWindow.setTitle("<br>");

           map.infoWindow.show(graphic.geometry);

      });

   map.enableMapNavigation();

}