i have a table and a leaflet/mapquest
I try to open en popup when i click on a item in the table i do a listener but that don't work
Is there someone who can help me
THANKS
//JS
function geocodeMap() {
var adresses1 = adresses.slice(0,99);
var adresses2 = adresses.slice(100,199);
L.mapquest.geocoding().geocode(adresses1, createMap);
}
function createMap(error, response) {
// Initialize the Map
var map = L.mapquest.map('map', {
layers: L.mapquest.tileLayer('map'),
center: [45.7621209,4.8348726],
zoom: 14
});
map.addControl(L.mapquest.control());
// Generate the feature group containing markers from the geocoded locations
var featureGroup1 = generateMarkersFeatureGroup(response);
// Add markers to the map and zoom to the features
featureGroup1.addTo(map);
// map.fitBounds(featureGroup1.getBounds());
function generateMarkersFeatureGroup(response) {
var group = [];
for (var i = 0; i < response.results.length; i++) {
var location = response.results[i].locations[0];
var locationLatLng = location.latLng;
var ntravaux =travaux[i];
var j = i+1;
var ndossiers = '<div id="3.0">'+dossiers[i]+' <br>'+ntravaux+'<\/div>';
// href="https://ads.grandlyon.fr/adscs/pages/dossier/Resume.aspx?nomDossier='+dossiers[i]+'">'+dossiers[i]+'<\/a>
var ntypeD = typeD[i];
if (ntypeD == 'PC') {var couleurType='flag-FA0909-' }
else if (ntypeD == 'DP') {var couleurType='flag-FAC009-'}
else if (ntypeD == 'PD') {var couleurType='flag-FF00EF-'}
else if (ntypeD == 'CP') {var couleurType='flag-08FF00-'}
else {var couleurType='flag-'}
// Create a marker for each location
var marker = L.marker(locationLatLng, {
icon: L.icon({
iconUrl: 'https://assets.mapquestapi.com/icon/v2/'+couleurType+j+'.png'
})
})
// .bindPopup(location.street);
.bindPopup(ndossiers);
group.push(marker);
}
return L.featureGroup(group);
}
//listeners
window.addEventListener('DOMContentLoaded', ()=>{
for (let item of document.querySelectorAll('[id^="_recreated__bookmark__"]')){
let nom = item.textContent;
setupListeners(nom);
}
});
function setupListeners(nom){
item.addEventListener('click', ()=>{
marker['nom'].openPopup();
});
}
//End listerners
}
</script>
<script src="https://../jquery.dataTables.min.js" type="text/javascript"></script>
//HTML
<table style="border-collapse: collapse; empty-cells: show; width: 100%;" id="__bookmark_1">
<col style=" width: 5%;"></col>
<col style=" width: 15%;"></col>
<col style=" width: 18%;"></col>
<col style=" width: 15%;"></col>
<col style=" width: 22%;"></col>
<col style=" width: 15%;"></col>
<col style=" width: 15%;"></col>
<col style=" width: 0.1%;"></col>
<tr class="style_5" valign="top" align="center">
<th >
<div>N°</div>
</th>
<th >
<div >Nom du dossier</div>
</th>
<th >
<div >Demandeur</div>
</th>
<th >
<div >Adresse des travaux</div>
</th>
<th >
<div >Description des travaux</div>
</th>
<th >
<div >Surface plancher</div>
</th>
<th >
<div >date de dépot</div>
</th>
<th ></th>
</tr>
<tr valign="top" align="left">
<td >
<div id="point">
<a href="#1.0">1</a>
</div>
</td>
<td >
<div>DP 069 381 21 01544</div>
</td>
<td>
<div>MAIRIE /div>
</td>
<td >
<div>Montée des Carmélites</div>
</td>
<td >
<div>Réalisation d'une fresque murale</div>
</td>
<td >
<div>
<div style="visibility:hidden"> </div>
</div>
</td>
<td >
<div>2 juil. 2021</div>
</td>
<td >
<div style=" overflow:hidden;"><script type="text/javascript">var monadresse = "Montée des Carmélites";
var monadresse1 = DanaMethodReplace("replace",monadresse, "'", "\'");
var monadresse2 = ', Lyon, France';
var monadresse0 = monadresse1 + monadresse2;
var newLength = adresses.push(monadresse0);
var newLength2 = dossiers.push('DP 069 381 21 01544');
var newlenght3 = typeD.push('DP');
var mestravaux = "Réalisation d'une fresque murale";
var newlenght4 = travaux.push(mestravaux)
</script>
</div>
</td>
</tr>
<tr valign="top" align="left">
<td>
<div id="_recreated__bookmark__1">
<a href="#2.0">2</a>
</div>
</td>
<td>
<div>DP 069 381 21 01497</div>
</td>
<td>
<div>VILLE </div>
</td>
<td >
<div>26 Rue du Bon Pasteur</div>
</td>
<td >
<div>Modification de clôture</div>
</td>
<td >
<div>
<div style="visibility:hidden"> </div>
</div>
</td>
<td >
<div>28 juin 2021</div>
</td>
<>
<div style=" overflow:hidden;">
<script type="text/javascript">var monadresse = "26 Rue du Bon Pasteur";
var monadresse1 = DanaMethodReplace("replace",monadresse, "'", "\'");
var monadresse2 = ', Lyon, France';
var monadresse0 = monadresse1 + monadresse2;
var newLength = adresses.push(monadresse0);
var newLength2 = dossiers.push('DP 069 381 21 01497');
var newlenght3 = typeD.push('DP');
var mestravaux = "Modification de clôture";
var newlenght4 = travaux.push(mestravaux)
</script> </div>
</td>
</tr>
</table>
Is the table click event firing?
If so, are you getting an error message?
If not, are any popups opening?
Is the marker variable available in the setupListeners function?