Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Passing sightly property or variable inside js function

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

View solution in original post

4 Replies

Avatar

Level 8

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

Avatar

Correct answer by
Community Advisor

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

 

Avatar

Level 2

I added 'scriptString' context and it worked fine.

< button class ="tablinks" onclick="openSection(event, ${tabs.id @CONTEXT = 'scriptString'}-section)" > 

When I add @CONTEXT = 'text' , it prints html on page.

 

Thanks for guiding me.

Avatar

Community Advisor

@LaMind3 

Try using @content along with the sightly prop that you are fetching and displaying.