Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

onclick function in ui.frontend

odabio
Level 3
Level 3

Hi everyone

 

I’ve created a custom component button search

odabio_0-1636730782756.png

 

Here’s the HTML of the button (buttonsearch.html)

odabio_1-1636730782758.png

 

On the ui.frontend > src > main > webpack > components ( there’s scss and js files) I’ve created a js file ( _buttonsearch.js), where my function “displayModal” is defined

odabio_2-1636730782765.png

But when i click the button I get an error “Uncaught ReferenceError: displayModal is not defined” anyone knows hpw could I make it work ?

Thanks in advance.

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,

I would suggest to add a class/id to button and get the button instance inside your javascript.

But answering your question, the scope of the function is not global thats why it is not undefined outside its scope. you can create as a global function to make it work, e.g. jquery plugin https://learn.jquery.com/plugins/

https://codepen.io/arunpatidar02/pen/yLoqrYv

 

View solution in original post

0 Replies
SantoshSai
Level 5
Level 5

Hi @odabio 

I believe you have to manage with your imports from webpacks.

Regards,

Santosh

BrianKasingli
Community Advisor
Community Advisor

Assuming that you are using the latest aem-project-archtype, ensure that you have all your imports are identified from the main.ts or main.js file.

 

The out of the box main.ts file looks like this; aem-project-archetype/main.ts at develop · adobe/aem-project-archetype · GitHub

 

Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,

I would suggest to add a class/id to button and get the button instance inside your javascript.

But answering your question, the scope of the function is not global thats why it is not undefined outside its scope. you can create as a global function to make it work, e.g. jquery plugin https://learn.jquery.com/plugins/

https://codepen.io/arunpatidar02/pen/yLoqrYv