New Participant

Solved

Dynamically update the div ID in the component.html

Hi Team,

Could you please help me with how to dynamically update the DIV ID within the component.html based on the number of occurences in the page.

Here the id=testcontainer1 should get dynamically updated as 1,2,3,so on.. based on the number of components being placed on the page.

Thanks!

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 Anish-Sinha

Hi @keerthi97 ,

There are couple of things I can suggest here:-

If for your requirement you can manage just to have a unique id for every time a component is dropped in a page- ex- testcontainer-someUniqueId, then use this documentation. You can have a js code to manipulate the component just by searching the id. - https://aem.redquark.org/2019/12/generate-id-for-aem-components.html
if you have to use 1,2,3... then you will have to right a custom js snippet which will iterate through the dom by keeping the count of the iteration it finds, look for the testcontainer id and append -1,-2,-3 and so on. This has to be done completely with custom js code. Here your js will run every time you load a page in order to update the count as and when new component is added or removed.

New Participant

If I understand your requirement correctly, then please follow below process to implement.

1. Implement a component which can be added to template so that Editors can create pages out of it.

2. Let's assume we have created a page which has component.

3. Develop component logic to read all components added to the page and simpley display that number using sling model.

New Participant

Hi,

you can use below for dynamic id

<div id="testcontainer-${resource.path.hashCode}">
</div>

To add number based on occurrence, use Front-end code to append id/data attribute for count.

Arun Patidar

New Participant

Thanks for your response.

Could you please explain how and from where the value of '${resource.path.hashCode} gets appended in html

<div id="testcontainer-${resource.path.hashCode}">
</div>

Thanks.

Anish-SinhaAccepted solution

Employee

There are couple of things I can suggest here:-

If for your requirement you can manage just to have a unique id for every time a component is dropped in a page- ex- testcontainer-someUniqueId, then use this documentation. You can have a js code to manipulate the component just by searching the id. - https://aem.redquark.org/2019/12/generate-id-for-aem-components.html
if you have to use 1,2,3... then you will have to right a custom js snippet which will iterate through the dom by keeping the count of the iteration it finds, look for the testcontainer id and append -1,-2,-3 and so on. This has to be done completely with custom js code. Here your js will run every time you load a page in order to update the count as and when new component is added or removed.

Sign up