Skip to main content
L
LaMind3
Level 2
October 5, 2020
Solved

Passing sightly property or variable inside js function

  • October 5, 2020
  • 4 replies
  • 6195 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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

 

4 replies

Manjunath_K
Manjunath_K
Level 7
October 5, 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

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    October 5, 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

     

      L
      LaMind3Author
      Level 2
      October 5, 2020

      I added 'scriptString' context and it worked fine.

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

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

       

      Thanks for guiding me.

        Nikhil-Kumar
        Community Advisor
        Nikhil-KumarCommunity Advisor
        Community Advisor
        October 5, 2020

        @lamind3 

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

          Terms & ConditionsAccessibility statement

          Loading footer...