Adding html item to infoWindow - ArcGIS Javascript API 3.18

Question

This question regarding a web app built using the ArcGIS Javascript API 3.18. I am trying to add an dojo select to the title of an infoWindow. The select box is intended to be populated with the list of identified results. I'm trying two different ways:

1) Adding the combobox declaratively using html:

var template = new esri.InfoTemplate(layerName + "<br/><select id="id_select" data-dojo-type="dijit/form/Select"</select>,"<br/> FID : ${FID}");

The combobox is there, but I don't know how to access the combobox to add the options dynamically (via addOptions). I would normally do dijit.byId("id_select"), but considering it doesn't exist until it's created...I'm not sure how to go about this way.

2) Programmatically With the code below, the title displays information regarding the dijit/form/select widget (It displays: [object HTML TableElement]), but not the widget itself. Wondering if this can be rectified using dijitStartup(), but I can't haven't figured out how to use it (currently trying something along the lines of myTemplate.startupDijits(mySelectBox)--not with these variable names). I tried using domConstruct like this example

var identifyTask, identifyParams, idPoint;
var identifyResults;

require([
  "esri/dijit/Popup",
  "esri/tasks/IdentifyTask",
  "esri/tasks/IdentifyParameters",
  "dijit/form/Select",
  "dojo/dom-construct",
  "dojo/promise/all",
  "dojo/domReady!"
], function (
  Popup, IdentifyTask, IdentifyParameters, Select, domConstruct, All
) {
  var identifySelect;

  //dojo.connect(window.myMap, "onLoad", mapReady);
  mapReady(window.myMap);

  function mapReady(map) {
    dojo.connect(window.myMap, "onClick", runIdentifies);
  }

  function runIdentifies(evt) {
    identifyResults = [];
    idPoint = evt.mapPoint;
    var layers = dojo.map(window.myMap.layerIds, function (layerId) {
      return window.myMap.getLayer(layerId);
    });
    layers = dojo.filter(layers, function (layer) {
      if (layer.visibleLayers[0] !== -1) {
        return layer.getImageUrl && layer.visible
      }
    }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
    var tasks = dojo.map(layers, function (layer) {
      return new IdentifyTask(layer.url);
    }); //map each visible dynamic layer to a new identify task, using the layer url
    var defTasks = dojo.map(tasks, function (task) {
      return new dojo.Deferred();
    }); //map each identify task to a new dojo.Deferred
    var params = createIdentifyParams(layers, evt);

    var promises = [];

    for (i = 0; i < tasks.length; i++) {
      promises.push(tasks[i].execute(params[i])); //Execute each task
    }

    var allPromises = new All(promises);
    allPromises.then(function (r) { showIdentifyResults(r, tasks); });
  }

  function showIdentifyResults(r, tasks) {
    var results = [];
    var taskUrls = [];
    var resultNames = [];


    r = dojo.filter(r, function (result) {
      return r[0];
    });
    for (i = 0; i < r.length; i++) {
      results = results.concat(r[i]);
      for (j = 0; j < r[i].length; j++) {
        taskUrls = taskUrls.concat(tasks[i].url);
      }
    }
    results = dojo.map(results, function (result, index) {
      var feature = result.feature;
      var layerName = result.layerName;
      var serviceUrl = taskUrls[index];

      resultNames.push({
        value: result.layerName,
        label: result.layerName
      });
      feature.attributes.layerName = result.layerName;

      var identifiedList = getIdentifiedList(resultNames);
      console.log(identifiedList);

      var template = new esri.InfoTemplate();
      template.setTitle(identifiedList);
      feature.setInfoTemplate(template);

      var resultGeometry = feature.geometry;
      var resultType = resultGeometry.type;
      return feature;
    });


    if (results.length === 0) {
      window.myMap.infoWindow.clearFeatures();
    } else {
      window.myMap.infoWindow.setFeatures(results);
    }


    window.myMap.infoWindow.show(idPoint);

    identifySelect.on('change', function(evt) {
      var identIndex = identifySelect.get("value");
      console.log(identIndex);
      window.myMap.infoWindow.select(identIndex);
    });

    return results;
  }

  function getIdentifiedList(options) {
    identifySelect = new Select({
      name: "identifySelect",
      id: "id_select",
      options: options
    }, domConstruct.create("select"));
    return identifySelect.domNode;
  }

  function createIdentifyParams(layers, evt) {
    var identifyParamsList = [];
    identifyParamsList.length = 0;
    dojo.forEach(layers, function (layer) {
      var idParams = new esri.tasks.IdentifyParameters();
      idParams.width = window.myMap.width;
      idParams.height = window.myMap.height;
      idParams.geometry = evt.mapPoint;
      idParams.mapExtent = window.myMap.extent;
      idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
      var visLayers = layer.visibleLayers;
      if (visLayers !== -1) {
        var subLayers = [];
        for (var i = 0; i < layer.layerInfos.length; i++) {
          if (layer.layerInfos[i].subLayerIds == null)
          subLayers.push(layer.layerInfos[i].id);
        }
        idParams.layerIds = subLayers;
      } else {
        idParams.layerIds = [];
      }
      idParams.tolerance = 5;
      idParams.returnGeometry = true;
      identifyParamsList.push(idParams);
    });
    return identifyParamsList;
  }

});

Answer 1

Hi this is kinda old but i'll give it a shot. I hope this answers your question.

So if the problem is accessing the infoWindow what you need to do is set up a listener for when it is created.

on(map.infoWindow, "show", function () {
            // do something
})

I have a fiddle that shows how to access infoWindow upon creation: https://jsfiddle.net/kreza/jpLj5y4h/