Gestire l’evento clic

[AEM Forms as a Cloud Service]{class="badge informative"}

Crea una libreria client e associala al componente.

Aggiungi il seguente codice nel file JavaScript della libreria client da gestire per l’evento clic.
In base allo stato selezionato, è possibile visualizzare i dati appropriati restituiti dal punto finale. I dettagli dell’endpoint e i dati da visualizzare dipendono dal caso d’uso.

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