Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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.