How to use onclick method inside AEM compoenent | Community
Skip to main content
September 10, 2019
Solved

How to use onclick method inside AEM compoenent

  • September 10, 2019
  • 1 reply
  • 2555 views

Hi All,

Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.

I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.

<div data-sly-unwrap data-sly-use.test="test.js"></div>

<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >

The content I authored is getting displayed in class and Id, but it is not displaying in the  onClick method.

Below is the Output am getting after authoring.

<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >

Output I needed is :

<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >

Many thanks,

Saravanan R

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 arunpatidar

I would suggest add a unique class to the a tag and use separate javascript to bind the ob click method.

The reason why value is getting trimmed because you are not using correct context

<a href="#whatever" onclick="${myFunctionName @ context='scriptToken'}()">Link</a>

scriptToken

For JS identifiers, literal numbers, or literal strings

Validates the JavaScript token, outputs nothing if validation fails.

scriptString

Within JS strings

Encodes characters that would break out of the string.

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
September 10, 2019

I would suggest add a unique class to the a tag and use separate javascript to bind the ob click method.

The reason why value is getting trimmed because you are not using correct context

<a href="#whatever" onclick="${myFunctionName @ context='scriptToken'}()">Link</a>

scriptToken

For JS identifiers, literal numbers, or literal strings

Validates the JavaScript token, outputs nothing if validation fails.

scriptString

Within JS strings

Encodes characters that would break out of the string.

Arun Patidar