Gestion d’un événement de clic
[AEM Forms as a Cloud Service]{class="badge informative"}
Créez une bibliothèque cliente et associez-la au composant.
Ajoutez le code suivant dans votre fichier JavaScript de la bibliothèque cliente pour gérer l’événement de clic.
Selon l’état sélectionné, les données appropriées renvoyées par le point d’entrée peuvent être affichées. Les détails du point d’entrée et les données à afficher dépendent de votre cas d’utilisation.
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