Passing sightly property or variable inside js function | Community
Skip to main content
LaMind3
Level 2
Oct 5, 2020 6:39 AM UTC
Solved

Passing sightly property or variable inside js function

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.
BrianKasingli
BrianKasingliAccepted solution
New Participant
Oct 5, 2020 8:40 AM UTC

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 reply

4 replies

Nikhil-Kumar
Nikhil-Kumar
New Participant
Oct 5, 2020 10:09 AM UTC

@lamind3 

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

Translate
    LaMind3Author
    Level 2
    Oct 5, 2020 9:30 AM UTC

    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.

    Translate
      BrianKasingli
      BrianKasingliAccepted solution
      New Participant
      Oct 5, 2020 8:40 AM UTC

      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

       

      Translate
        Manjunath_K
        Manjunath_K
        Level 7
        Oct 5, 2020 7:18 AM UTC

        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

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...