What are the Slack Archives?
It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.
Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..
Hello everyone, we are playing around with some AJAX content. Therefore we are using Ajax-Provider a
Hello everyone,
we are playing around with some AJAX content. Therefore we are using Ajax-Provider and Ajax-Renderer to place new content in the DOM.
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/ajax-provider/ajax-provider.ts
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/ajax-renderer/ajax-renderer.ts
Afterwards we need to call the application mount() function to register new Components as Custom Elements.
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/app/index.ts#L75
This seems to work fine with just one new component at a time. But if there are multiple AJAX calls which contains the same new component, the mount() functions run sometimes into the following error:
application error -> Error: component1 failed to be defined Failed to execute 'define' on 'CustomElementRegistry': the name "component1" has already been used with this registry at candidate.ts:53 at Generator.next (<anonymous>) at asyncGeneratorStep
Any ideas how we can ensure that the new component is only once submitted as a new candidate?
Comments
-
Hi Marcel. I’m really interested in this case. Can you please provide more details? Are you calling
mount()
method just once or it’s called after each ajax call? I assume second variant.0 -
Hi Alexander, thanks for your response. Yes you are right, we are calling the
mount()
after each AJAX call, which seems to collide in this error.mount()
should be performed after all AjaxRenderer had ran theirrender()
method. How can we hook into this point?0 -
It looks for me like another component that should subscribe on ajax-renderer events and run
mount()
once all calls are done.0 -
Thanks for your help, we got indeed this managed to work with
Promise.all()
on all contained AjaxProvider fetch promises. AjaxRenderer seems to be executed even before AjaxProvider will resolve his fetch promise 😉0 -
@UN6T8SEM7 Or is there another way to mount new components independently of each other without collision? Cause some of the components need more time to load than others. This slows up the entire mount process
0
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 75 Spryker News
- 924 Developer Corner
- 783 Spryker Development
- 88 Spryker Dev Environment
- 362 Spryker Releases
- 3 Oryx frontend framework
- 35 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 25 Job Opportunities
- 3.2K 📜 Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 70 Spryker Safari Questions
- 50 Random