InfoTemplate Contents for Graphics are not visible after first click - only on IE

sumitzarkar · ‎06-02-2015

We are using "esri/InfoTemplate" to show infowindow for the Graphics.

And when we are setting any Node (element) as the content for infoTemplate we can see the infowindow properly only for first time , however next time onward when we click on same graphic the blank infowindow is shown.

Following are our observations:

If string is set as the content for InfoTemplate then the infowindow is always shown properly.
If an element is set as the content for InfoTemplate and when we click on the graphics for first time we can see the infowindow as expected. However from next click on the graphic the innerHTML of element(which is set as content) gets cleared(Empty).

Infowindow content when graphic is clicked for first time:

Infowindow content when same graphic is clicked for second time:

Below is the code Sample:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Graphic InfoTemplate sample</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
        html, body, #mapDiv
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        button
        {
            display: block;
        }
    </style>
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
        var map;
        require([
        "esri/map",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "esri/graphic",
        "esri/Color", "dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"
      ], function (
        Map,
        SimpleMarkerSymbol,
        InfoTemplate,
        Graphic,
        Color, dom, domConstruct, on
      ) {
   //create symbol for graphic
          var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
          markerSymbol.setColor(new Color("#00FFFF"));
   
          var count = 1;//by default set graphic count to 1
          //create map
          map = new Map("mapDiv", { basemap: "streets", center: [-25.312, 34.307], zoom: 3});
          map.on("click", addGraphic);
         
   
          function addGraphic(evt) {
              var graphic, infoTemplate, templateDiv, templateButton;
              if (evt.graphic) {
                  //display infowindow if graphic is clicked.
                  map.infoWindow.show();
              } else {
                  //create new graphic
                  graphic = new Graphic(evt.mapPoint, markerSymbol);
                  //create info template for graphic
                  infoTemplate = new InfoTemplate();
   
                  infoTemplate.setTitle("Graphic " + count);
   //create template containing DOM node
                  templateDiv = domConstruct.create("div", { "style": "background-color:grey; color:white; height:60px", 'innerHTML': "Graphic " + count }, null);
                  templateButton = domConstruct.create("button", {  'innerHTML': "Button for Graphic " + count }, templateDiv);
   //set Content 
   infoTemplate.setContent(templateDiv);
   
   //set infoTemplate to graphic
                  graphic.setInfoTemplate(infoTemplate);
   
   //Add Graphics on map
                  map.graphics.add(graphic);
                  count++;
              }
          }
      });
    </script>
</head>
<body>
    <div id="mapDiv">
    </div>
</body>
</html>

Steps to reproduce:

1.Click on map to add the graphics.

2.Now click on the graphic. (observe that you will see the text "Graphic 1" and a Button) :

3. Close the infowindow

4.Now click on the same graphic again. (observe that you will not see the text and Button) :

sumitzarkar · ‎06-02-2015

This is reproducible only in IE.

RobertScheitlin__GISP · ‎06-02-2015

Sumit,

Sorry I missed that part.

YousefQuran · ‎06-03-2015

Hey sumit zarkar,

I know it is looks like bad development, but I feel its the normal way when dealing with IE!

I made some modifications on this part. So I re-create the content of InfoWindow which works fine.

if (evt.graphic) {
    infoTemplate = new InfoTemplate();
    var currentTitle = evt.graphic.infoTemplate.title;
    infoTemplate.setTitle(currentTitle);
    templateDiv = domConstruct.create("div", {
        "style" : "background-color:grey; color:white; height:60px",
        'innerHTML' : currentTitle
    }, null);
    templateButton = domConstruct.create("button", {
        'innerHTML' : "Button for " + currentTitle
    }, templateDiv);
    infoTemplate.setContent(templateDiv);
    evt.graphic.setInfoTemplate(infoTemplate);
    map.infoWindow.show();
}

Hope this help you.

Regards,
Yusuf

sumitzarkar · ‎06-03-2015

Yusuf Ali this will only work if we click on the graphic again.

however it will not work when multiple feature are shown in infowindow and when we traverse to next feature and again traverse back to the first feature.

JillianStanford · ‎08-05-2015

Hi Sumit,

Did you find a work around to this problem?

I am having the exact same issue as you describe.

Any ideas are appreciated.

Jill