Passing sightly property or variable inside js function

Avatar

Avatar
Validate 1
Level 1
LaMind3
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
LaMind3
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
LaMind3
Level 1

04-10-2020

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

05-10-2020

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

 

Answers (3)

Answers (3)

Avatar

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

140 likes

Total Posts

188 posts

Correct reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

140 likes

Total Posts

188 posts

Correct reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile
Manjunath_K
MVP

05-10-2020

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

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

05-10-2020

@LaMind3 

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

Avatar

Avatar
Validate 1
Level 1
LaMind3
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
LaMind3
Level 1

Like

1 like

Total Posts

15 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
LaMind3
Level 1

05-10-2020

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.