Removing JS from html file

Avatar

Avatar

JakeCham

Avatar

JakeCham

JakeCham

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

snbaem

Avatar

snbaem

snbaem

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

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

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

asutosh_j3

Avatar

asutosh_j3

asutosh_j3

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!