I am facing a major issue that I can't seem to resolve. I am using Leaflet to display a map combined with AJAX. When I click on a country, a list of "customers" is displayed. However, when I click on a specific customer for more information, the customer data multiplies exponentially (1 to 3 to 5 to 8...). Any assistance would be greatly appreciated.
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this._div.setAttribute("id", "idBoxList");
L.DomEvent
.addListener(this._div, 'mouseover', function () {
MapShowCommand();
});
this.update();
this.clickPays();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<div class="wrapper--popup-agents"><h3 class="title-med">Agents disponibles</h3><div class="buttonListeAgent" id="buttonListeAgentId"><span class="icon-keyboard_arrow_down"></span></div><div class="textfield">Liste des agents disponibles selon le pays sélectionné.</div></div><div class="agents--wrapper"><div class="content"><ul class="listAgents"></ul></div></div>';
};
function MapShowCommand() {
$('.buttonListeAgent').on('click', function(){
if ($('#idBoxList').hasClass("show")) {
$('#idBoxList').removeClass("show");
info.update();
}
});
$('.listAgents li').on('click', function(){
var el = document.getElementById('overlayMap');
L.DomEvent.disableScrollPropagation(el);
L.DomEvent.disableClickPropagation(el);
var idAgent = $(this).children('input').val();
var base_path = $('#url_base').val();
console.log(idAgent);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:"/map-agents/agents",
type:'POST',
data:{idAgent:idAgent},
dataType: "JSON",
beforeSend: function () {
$('.wrapper--agent-map').append('<div class="spinner-border text-info" role="status"></div>');
},
success: function (response) {
console.log(response.nameFirm);
//$('.wrapper--agent-map').append('<div>'+ response.nameFirm +'</div>' + '<div>'+ response.country +'</div>' +'<div>'+ response.city +'</div>' +'<div>'+ response.network +'</div>' + '<div>'+ response.lastName +'</div>');
},
complete: function () {
$('.spinner-border.text-info').remove();
},
error: function (response){
console.log(response);
}
});
});Image displaying errors: