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

[Keerthi97]

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!

[AEM_Engineering]

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

[B_Sravan]

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

[arunpatidar]

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.

[Keerthi97]

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!

[arunpatidar · Accepted solution]

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?

[Keerthi97]

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!

[arunpatidar]

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');