Assistance Required for Dynamically Updating Canvas Components with JavaScript

Dear Canvas Support Team,

I hope this message finds you well. We are currently working on a project where we utilize the Canvas theme and have encountered a challenge that we hope you can assist us with.

Our scenario involves dynamically adding new components to a webpage, such as carousels and other elements that rely heavily on JavaScript for their functionality. However, we've noticed that after these elements are inserted into the page post-initial load, they do not function as intended. The JavaScript functionalities associated with these Canvas components do not seem to apply automatically to the newly added elements.

To give a specific example, when we dynamically add a carousel to the webpage, it does not exhibit the expected behavior that is typically initiated when the page first loads.

We have attempted a method where we listen for updates and then try to reinitialize the Canvas components like so:

javascript
Copy code
// Example of our current approach
document.addEventListener("updateEvent", function() {
// Code to reinitialize Canvas components
});
Unfortunately, this approach has not yielded the desired results. We suspect there might be specific JavaScript code or a function we need to execute to properly apply Canvas's functionalities to these dynamically added elements, without having to reload the entire page.

Could you please provide guidance or share a snippet of JavaScript code that would allow us to achieve this? Essentially, we need a way to reapply or reinitialize the Canvas theme's JavaScript functionalities to new elements added to the page after the initial load.

Thank you very much for your assistance in this matter. We appreciate any help or insights you can provide.

Best regards,

Hello!

The result of our tests:
It only works on a single element at a time and only on the last element of the stack.
How we tested it:
We have a parent div identified by #editor which has dynamic children that are all refreshed at once.
When refreshed, we applied the provided code on the parent element:
SEMICOLON.Core.runContainerModules(document.querySelector("#editor"));
but only the last of the children elements is being worked on by the code.
We tested this by injecting two carousels, and only the last one was displayed properly.
We also tried to loop through each of the children elements and apply to each of them the code, but still the same result:
const dataLayouts = document.querySelectorAll("#editor [data-layout]");
dataLayouts.forEach(element => {
SEMICOLON.Core.runContainerModules(element);
});

Thanks for your suggestion, we'll do a few more tests and build a separate prototype to make sure it's not a compatibility problem with something else.

I'll let you know if we still can't do it.

After various in-depth tests, we've found that the problem is that this approach doesn't work with Livewire.

Can you help?

the bug only affects carousels.

We've found a solution https://stackoverflow.com/questions/74639248/how-to-refresh-a-element-within-owl-carousel-slider-in-laravel-using-livewire

Hi thanks but using setTimeout with SEMICOLON.Core.runContainerModules gives the same result and we've already tried that