In a Discourse development discussion titled ‘Rerender on new route or transition,’ users seek solutions for dynamically re-rendering DOM elements during page transitions. codechef reports difficulty updating a banner ad plugin via Widget or Component through a Plugin Outlet above the topic list, noting re-renders only occur on browser refresh. vinothkannans suggests most header UI sections don’t refresh on page transitions and requests code for review. jack2 proposes using a didTransition hook on the router with Ember.run.schedule('afterRender'), though notes it’s unreliable. daniyal and later daniyal clarify needing a footer slider component for anonymous users that updates per topic visit, removing visited topics — but mounting via footer outlet doesn’t trigger re-renders. Johani advises using the inserted-custom-html:footer event to update footer content dynamically, referencing a meta.discourse.org thread for details. Overgrow asks for best practices to dynamically render content at the top of the homepage on each transition, requesting example plugins. The core issue revolves around Discourse’s SPA behavior preventing automatic re-renders on route changes, requiring event-driven or lifecycle-based workarounds.
I’m building a banner ad plug-in. I have a section of the DOM that I need to re-render each time the page transitions. I have attempted (unsuccessfully) both a Widget and Ember Component, but neither are updating. I loaded them via a Plugin Outlet. I even tried to simplify the problem and dump the current timestamp of the load to the screen (rather than a banner), but only get a re-render if I refresh the browser.
Can someone please point me in the right direction for a solution? I’ve been through the main Discourse developer tutorials, BTW. Just seems like I’m missing something simple.
In which place you are trying to render? In Discourse most of the header UI sections will not refresh across page transactions unlike you hit browser refresh.
And can you post your code to see how you are doing it.
Maybe you can try the following code (not tested):
// My plugin initializer
export default {
name: 'myPlugin',
initialize(container) {
// Reopen the router to add a didTransition hook
const router = container.lookup('router:main')
router.reopen({
doSomething: function() {
// Wait for rendering to be over. THIS DOESN'T WORK IN ALL CASES.
// In fact, there is no way to be sure rendering is complete, because
// a 'complete rendering' is meaningless (think about a looping DOM
// animation)
Ember.run.schedule('afterRender', null, () => {
// Do your stuff here
...
})
}.on('didTransition')
})
}
}