クリックイベントの処理
最終更新日： 2025年3月27日
- 適用対象：
- Experience Manager as a Cloud Service
- トピック：
- アダプティブフォーム
作成対象：
- 初心者
- 中級
- 開発者
AEM Forms as a Cloud Service
クライアントライブラリを作成し、クライアントライブラリをコンポーネントに関連付けます。
クリックイベントを処理するには、クライアントライブラリの 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);
});
});
});
});
Experience Manager
