クリックイベントの処理
[AEM Forms as a Cloud Service]{class="badge informative"}
クライアントライブラリを作成し、クライアントライブラリをコンポーネントに関連付けます。
クリックイベントを処理するには、クライアントライブラリの JavaScript ファイルに次のコードを追加します。
選択した状態に基づいて、エンドポイントから返される適切なデータを表示できます。エンドポイントの詳細と表示されるデータは、ユースケースによって異なります。
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