Handle click event
[AEM Forms as a Cloud Service]{class="badge informative"}
Create a client library and associate the client library with the component.
Add the following code in your javascript file of the client library to handle to click event.
Based on state selected, the appropriate data returned by the end point can be displayed. The details of the endpoint and the data to be displayed will depend on your use case.
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