topic Re: Listener on Button inside InfoTemplate in ArcGIS JavaScript Maps SDK Questions

Listener on Button inside InfoTemplate

EvelynHernandez — Sat, 11 Dec 2021 08:52:20 GMT

Hello,

Im having an issue with the addEventListener for a button that i put inside a infoTemplate.

I have the following code:

var deferred = identifyTask
 .execute(identifyParams)
 .addCallback(function (response) {
 var filtered = response.filter(e=>{
 return e.layerName =='Luminarias';
 });
return arrayUtils.map(filtered, function (result) {
 var feature = result.feature;
 var layerName = result.layerName;
feature.attributes.layerName = layerName;
 if (layerName === 'Luminarias') {
 var template = ap_info(feature)
 feature.setInfoTemplate(template);
 }
return feature;
 });
});

 mapp.infoWindow.setFeatures([deferred]);
 mapp.infoWindow.show(event.mapPoint);
deferred.then(()=>{
 document.getElementById("editar_btn").addEventListener('click', (e)=>{console.log(e,"button")});
 })
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And then where i make the info template:

function ap_info(feature){
 var content = `<div style=padding-top: 10px;>ROTULO: ${feature.attributes.ROTULO}<br /></div>
 <div style=padding-top: 10px;>Tipo Conexión: ${feature.attributes.TIPO_CONEXION}<br /></div>
 <div style=padding-top: 10px;>Tipo: ${feature.attributes.TIPO}<br /></div>
 <div style=padding-top: 10px;>Propiedad: ${feature.attributes.PROPIEDAD}<br /></div>
 <div style=padding-top: 10px;>Medido: ${feature.attributes.MEDIDO_TERRENO}<br /><Button class="ui button btn_busqueda" id="editar_btn"">Editar</Button></div>`;
var title = "ID Luminaria " + feature.attributes.ID_LUMINARIA;
 var infoTemplate = new InfoTemplate();
 infoTemplate.setTitle(title);
 infoTemplate.setContent(content);

return infoTemplate;
}‍‍‍‍‍‍‍‍‍‍‍‍‍

So how u see, in the info template i place the button inside the content.

<Button class="ui button btn_busqueda" id="editar_btn"">Editar</Button>

So i need to make the button work for each feature with a listener function that returns the current information shown in the infoWindow.

Any ideas? thanks in advice for the help!

Re: Listener on Button inside InfoTemplate

RobertScheitlin__GISP — Sat, 17 Mar 2018 23:05:07 GMT

Helen,

Here is a thread that answers that. https://community.esri.com/thread/162144

Re: Listener on Button inside InfoTemplate

EvelynHernandez — Sat, 11 Dec 2021 08:52:24 GMT

Ok, i make it work, but if i want to get the attributes from the infowindow when its more than 1 result?, like, lets say we have 2 results for the same point, but i only want to get the attributes from the second one .

Here is what i have in my code:

mapp.on('click', (event)=>{
 var identifyTask, identifyParams;
 identifyTask = new IdentifyTask(layers.read_dynamic_ap(this.props.token));
 identifyParams = new IdentifyParameters();
 identifyParams.tolerance = 10;
 identifyParams.returnGeometry = true;
 identifyParams.layerIds = [0, 1];
 identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
 identifyParams.width = mapp.width;
 identifyParams.height = mapp.height;
 identifyParams.geometry = event.mapPoint;
 identifyParams.mapExtent = mapp.extent;
 var onlyLum = [];
var deferred = identifyTask
 .execute(identifyParams)
 .addCallback(function (response) {
 var filtered = response.filter(e=>{
 return e.layerName =='Luminarias';
 });
return arrayUtils.map(filtered, function (result) {
 var feature = result.feature;
 var layerName = result.layerName;
feature.attributes.layerName = layerName;
 if (layerName === 'Luminarias') {
 var template = ap_info(feature)
 feature.setInfoTemplate(template);
 }
return feature;
 });
});

 mapp.infoWindow.setFeatures([deferred]);
 mapp.infoWindow.show(event.mapPoint);
 on(document.getElementById('map'), '.clickMe:click', function(e,x) {
 console.log("holasdASd", event);
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍