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
BedrockMission!

Learn More

View all

Sign in to view all badges

Removing JS from html file

Avatar

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

69 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

69 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
JakeCham
Level 2

02-04-2021

Currently I'm removing JS inside html file and put that into clientlib folder and calling it using template/clientlib.html inside html file.But I have faced an issue that when I put same component for multiple inside the same page that clientlib is calling one time so functionality is working for only the component which in in the top.Any solution that I can look over this issue. Clientlib.PNG

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Springboard
Level 5
snbaem
Level 5

Likes

86 likes

Total Posts

212 posts

Correct Reply

27 solutions
Top badges earned
Springboard
Establish
Validate 25
Validate 10
Validate 1
View profile

Avatar
Springboard
Level 5
snbaem
Level 5

Likes

86 likes

Total Posts

212 posts

Correct Reply

27 solutions
Top badges earned
Springboard
Establish
Validate 25
Validate 10
Validate 1
View profile
snbaem
Level 5

05-04-2021

@JakeCham Looks like the desired js is loaded on the page but desired logic is not called for each component just the top one. 

It could be that the logic depends on particular id or class and is not invoked for other components. A look into the code or a similar example will help.

If something needs to happen to the component on page load, it should be able to pick desired attribute and perform the action

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

02-04-2021

@JakeCham 

In your JavaScript you might be targeting only one component. You should get all the components and loop them and execute your logic once for each component on page.

Example:

document.querySelectorAll(".cmp-class").forEach((eachComponent) => {
   eachComponent.getAttribute(...);
   ....
});

Avatar

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

544 likes

Total Posts

663 posts

Correct Reply

190 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

544 likes

Total Posts

663 posts

Correct Reply

190 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile
asutosh_jena
Level 10

02-04-2021

Hi @JakeCham 

You can keep the JS files in clientlib and then embed the clientlib with your main clientlib which will be loaded across all the pages,
This will ensure the JS file to be loaded only once on the footer section irrespective of the number of times of component usage and will work as expected.

 

Also embeding the clientlib with main clientlib will reduce the number of network call and will be loaded after the page load which will improve the website performance.

 

Please refer the links to embed clienltibs:

http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem-63-part1.html

http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem63-part2_25.html

 

Hope this helps!

Thanks!