Handle click-gebeurtenis
[AEM Forms as a Cloud Service]{class="badge informative"}
Maak een clientbibliotheek en koppel de clientbibliotheek aan de component.
Voeg de volgende code toe in uw javascript-bestand van de clientbibliotheek die u wilt afhandelen om op de gebeurtenis te klikken.
Gebaseerd op geselecteerde staat, kunnen de aangewezen gegevens die door het eindpunt zijn teruggekeerd worden getoond. De details van het eindpunt en de te tonen gegevens zullen van uw gebruiksgeval afhangen.
document.addEventListener("DOMContentLoaded", function(event)
{
const apiUrl = 'API end point to return data based on the state selected';
// Select all <path> elements
const paths = document.querySelectorAll('path');
const tooltip = document.getElementById('tooltip');
const svg = document.getElementById('svg');
const states = document.querySelectorAll('path');
// Loop through each <path> element and add an event listener
states.forEach(state =>
{
state.addEventListener('click', function(event)
{
alert('path clicked:'+ this.id);
fetch(apiUrl+this.id)
.then(response =>
{
// Check if the response is ok (status code in the range 200-299)
if (!response.ok)
{
throw new Error('Network response was not ok ' + response.statusText);
}
// Parse the JSON from the response
console.log(response);
return response.text();
})
.then(data => {
// Handle the data
console.log(data);
})
.catch(error => {
// Handle any errors
console.error('There was a problem with the fetch operation:', error);
});
});
});
});
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69