Pass value from JS to sly attribute | Community
Skip to main content
V
v1101
Level 5
August 20, 2020
Solved

Pass value from JS to sly attribute

  • August 20, 2020
  • 4 replies
  • 3796 views

Hello Community - We are using HTL Use-API to get the cookie value from the script and printing the value in the component. For some reason, it is not working as expected and it retains the previous selected value. AEM document says "Use-API" could be slower.

 

Is there any way to use the return value from a java-script to the data-sly-test attribute?

 

<sly data-sly-use.productValue="test.js" data-sly-test="${productValue.resultsFound}">
<div>${productValue.results}</span></div>
</sly>

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 Varun_Shakya

Use jquery or javascript functions(document.cookie) to get the cookie value.

Add any class or id in div tag and with help of that identifier add the value in div tag[  $("#id").val()  ].

4 replies

Andrei_Dantsou
Andrei_Dantsou
Level 3
August 21, 2020

Hi @v1101,

Basically, the code written using JavaScript Use-Api is converted to Java (please see https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino for reference) and thus it is executed at a server side as well as Sightly (please see accepted solution here https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sightly-javascript-use-implemetaion-question/qaq-p/224442). If CDN and/or Dispatcher are used for caching content (the most likely), the server side approach for displaying cookies is not suitable - after html of a rendered page is cached, the back-end on Publish won't be hit to get the actual value and the cached one will be displayed.

I'd recommend following the fully front-end approach here - to move retrieval of cookies to JS stored in a clientlib. After the value is retrieved, it can be appended to necessary html element as described here https://api.jquery.com/append/

Regards

    V
    v1101Author
    Level 5
    September 5, 2020
    @2326695 Porwal - Thanks for your response. Can you tell me how to pass the cookie value to the back-end? i.e in data-sly-use to the WCMUsePojo in my case.
    Varun_Shakya
    Community Advisor
    Varun_ShakyaCommunity AdvisorAccepted solution
    Community Advisor
    August 21, 2020

    Use jquery or javascript functions(document.cookie) to get the cookie value.

    Add any class or id in div tag and with help of that identifier add the value in div tag[  $("#id").val()  ].

      V
      v1101Author
      Level 5
      August 23, 2020
      @varun_shakya - Thanks for your response. How to use the value return from javascript inside "data-sly-test"
      Nikhil-Kumar
      Community Advisor
      Nikhil-KumarCommunity Advisor
      Community Advisor
      August 22, 2020

      @v1101 
      Try rendering it on the server side itself to retrieve the cookie and then append to some html tag.
      This might solve your issue.

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>append demo</title>
      <style>
      p {
      background: yellow;
      }
      </style>
      </head>
      <body>
       
      <p>I would like to say: </p>
       
      <script>
      $( "p" ).append( "<strong>Hello</strong>" );
      </script>
       
      </body>
      </html>
       
        V
        v1101Author
        Level 5
        August 23, 2020
        Nikhil_Kumar_AEM - Basically I wanted to use the JS return value inside data-sly-test element. Not sure if this can be used or not
        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        August 22, 2020

        You should handle cookie from clientside.

        The reason is if page is cached then your request will not go to server side to execute code based on cookie.

        Arun Patidar
          Terms & ConditionsAccessibility statement

          Loading footer...