Estoy tratando de agregar detalles de respuesta JSON de una llamada AJAX a una ventana emergente de folleto. Puedo completar los datos usando un modal en el html pero quiero usar esto como una función de botón fácil en su lugar.

Probé algunas opciones, pero nada funciona para completar los datos en la ventana emergente y se muestra en blanco. Todo lo demás funciona como debería y el botón se agrega al mapa.

¿Algunas ideas?

 $('#selCountry').on('change', function(){ $.ajax({ url: "php/restCountries.php", type: 'POST', dataType: 'json', data: { country: $('#selCountry').val() }, success: function(result) { console.log('restCountries', result); if (result.status.name == "ok") { iso2CountryCode = result.data.alpha2Code; var countryName2 = result.data.name; countryName = countryName2.replace(/\s+/g, '_'); L.easyButton('<img src="images/info.png">', function(btn, map){ var detailsPopup = L.popup($('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>') + $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: ' + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>')).setContent(popup); detailsPopup.setLatLng(map.getCenter()).openOn(map); }).addTo(map); console.log(result.data.latlng[0]); var currentLat = result.data.latlng[0] var currentLng = result.data.latlng[1] marker = L.marker; L.marker([currentLat, currentLng], {icon: redMarker}).addTo(map); if (marker != undefined) { map.removeLayer(marker); };