Removing JS from html file | Community
Skip to main content
JakeCham
JakeCham
April 2, 2021
Solved

Removing JS from html file

  • April 2, 2021
  • 3 replies
  • 2248 views

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. 

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 Shubham_borole

@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

3 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
April 3, 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!

    JakeCham
    JakeChamAuthor
    April 4, 2021

    Hi @asutosh_j3

    I called the js in footer and it is working fine. But My concern is assume a page without having the above component , so in that page also particular client library is calling though it is not needed .. Is that fine ? Is that a bottleneck when it comes to site optimizations ?

     

    Anudeep_Garnepudi
    Community Advisor
    Anudeep_GarnepudiCommunity Advisor
    Community Advisor
    April 3, 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(...); .... });
      JakeCham
      JakeChamAuthor
      April 4, 2021

      Hi Anudeep_Garnepudi Iam already looping throug DOM element but how to looping get triggered once the all the elements loaded because it is dragging a component to the page ?

      Shubham_borole
      Community Advisor
      Shubham_boroleCommunity AdvisorAccepted solution
      Community Advisor
      April 5, 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

        Terms & ConditionsAccessibility statement

        Loading footer...