I am trying to pass slightly property - ${tabs.id} to openSection() as shown below.
<button class="tablinks" onclick="openSection(event, ${tabs.id}-section)">${tabs.tabname}</button>
But I see - onclick="openSection(event, -section)" in html when component is rendered.
whereas below expression works.
<div id="${tabs.id}-section" class="section">
html output:
<div id="first-section" class="section">
How can pass this property to openSection() to make this work?
Solved! Go to Solution.
Views
Replies
Total Likes
When passing data to HTML or JavaScript, You are missing the display context option, @context, mentioned by @LaMind3 try using "text", or "scriptString". If none of those work, have a look at the HTL documentation for other context options.
< button class ="tablinks"
onclick="openSection(event, ${tabs.id @context = 'scriptString'}-section)" >
${tabs.tabname}
</button >
Also, take a look at this blog article, as it explains, With HTL, How to Pass Data from AEM Backend to Javascript - https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript
Hi @LaMind3
Add @context as mentioned below & it will work as expected.
< button class ="tablinks" onclick ="openSection(event, ${tabs.id @context = 'text'}-section)" > ${tabs.tabname} </ button >
-Manjunath
When passing data to HTML or JavaScript, You are missing the display context option, @context, mentioned by @LaMind3 try using "text", or "scriptString". If none of those work, have a look at the HTL documentation for other context options.
< button class ="tablinks"
onclick="openSection(event, ${tabs.id @context = 'scriptString'}-section)" >
${tabs.tabname}
</button >
Also, take a look at this blog article, as it explains, With HTL, How to Pass Data from AEM Backend to Javascript - https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript
Views
Likes
Replies