Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Scripts are not loading when multiple components are added on the page

Avatar

Level 4

Hi All,

 

We had designed a component to generate dynamic script values based on the author inputs to display ads on the page.So , on adding multiple AD components  , script results are showing up only in the last component added on the page. Eventhough ID is unique to each component ,response is not shown in all the components added .Could you please suggest ways to fix this issue.

 

Used ${resource.path.hashCode} to generate the unique ID in each component.

id="testcontainer${resource.path.hashCode}

 

Thanks in Advance!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

Loading wound not be an issue bit executing javascript can be because of id.

Can you check if the javascript file is loading or not?



Arun Patidar

View solution in original post

7 Replies

Avatar

Level 1

Please take a closer look at your JavaScript code, as maybe it will only add behavior to "one" element on the page. 

Avatar

Community Advisor

Definitely not an issue with adding multiple components. Please check your java script.

Avatar

Community Advisor

I would suggesting to update java script logic to handle multiple instance of the AD.

Loading 10 instance of script for 10 AD component does not make sense from performance perspective.



Arun Patidar

Avatar

Level 4

Hi @arunpatidar ,

 

Thanks for your response.

 

While inspecting through component element , i can see special characters is getting added on the last before components on the page .

Working-Scripts loaded:

id=testcontainer132456

 

Working-Scripts Not loaded:

id=testcontainer-132456

 

So , could anyone please let me know whether this may cause the script to not load on the page.

 

Thanks in Advance!

Avatar

Correct answer by
Community Advisor

Hi,

Loading wound not be an issue bit executing javascript can be because of id.

Can you check if the javascript file is loading or not?



Arun Patidar

Avatar

Level 4

Hi ,

Javascript file is been loading but when adding the lazyload function , scripts are loading only in the last  component on the page.So , could you please help me to further troubleshoot this issue .

 

Thanks!

Avatar

Community Advisor

Hi,

You need to execute the code in the script to target all instance of the component.

Add a common class to the component e.g. testcontainer_class

var compInstances = document.querySelectorAll('.testcontainer_class');



Arun Patidar