Hi. When we change page in Discourse, these are the apparent steps: We click on the link The current content disappears and the loader appears The URL is updated and the new content appears This is slightly different when we go from a page to the home, as the URL is changed to the home URL when the current content disappears, and not when the new content appears. My goal is to have a script that is executed as soon as we click any page link on Discourse. api.onPageChange won’t fit in this case since the code is executed quite at the same time the new page content is loaded. Is there a Discourse method for that? I look at the event triggers but didn’t find any one corresponding to what I need.

Hey :wave: There’s currently no method in the Plugin-API that will allow you to fire a script before a page transition because this has not come up before as far as I recall. That said, you can leverage on the willTransition() action in the application route app/assets/javascripts/discourse/app/routes/application.js 52672b9ea // We need an empty method here for Ember to fire the action properly on all routes. willTransition() { this._super(...arguments); }, You would use something that like this in your theme / component // this fires after the transition api.onPageChange((url, title) => { console.log("after transition"); }); // this fires right before the transition api.modifyClass("route:application", { pluginId: "some-name", actions: { willTransition() { // run core code first this._super(...arguments); // then do some work console.log("before transition"); // you can also do something like this to see what data you have // to work with like _router console.log(this) } } });

[image] Joe: // this fires right before the transition api.modifyClass("route:application", { pluginId: "some-name", actions: { willTransition() { This doesn’t seem to fire on entering a Topic from a Topic List? I’ve also tried adding one: api.modifyClass("route:topic", { pluginId: PLUGIN_ID, actions: { willTransition() { but that doesn’t fire either.

Couple of reasons that might not be working: putting actions in a hash is an old syntax which we no longer use in Discourse. Theoretically it should work, but the interop with the new syntax might not be perfect. The modern way would be api.modifyClass("route:application", (Superclass) => class extends Superclass { @action willTransition(){ console.log("do something"); super.willTransition(...arguments); } }); standard modifyClass disclaimer applies: this is risky and could break at any time I don’t think willTransition is guaranteed to fire on the application route in all situations. (e.g. if a child route has a willTransition action, it won’t necessarily bubble up) I’d recommend using the events on the Ember router service instead: RouterService | 5.12.0 | Ember API Documentation e.g. something like const router = api.container.lookup("service:router"); router.on("routeWillChange", () => { console.log("route will change fired"); });

Nice, thanks David, I will try that next! This investigation was triggered (ahem) because I needed a way of firing something on every page change, and prior to Render. Page Change api event doesn’t seem to be guaranteed to fire before page elements are rendered, apparently.

[image] Robert: needed a way of firing something on every page change, prior to Render. I think you’ll struggle to do this perfectly. Ember expects to be in full control of rendering, so trying to hook into arbitrary points will be hard, and may cause issues (depending what you’re trying to do). Obviously I don’t know what your end goal is… so maybe the pain is justified. In which case: feel free to ignore me :wink: (of course, if you’d like to open a #dev topic about the problem you’re trying to solve, I’d happily take a look)

Happy to be explicit as the code is open source: javascripts/discourse/components/livewrapped-ad.gjs ce2bc2a3d @action triggerDestroy() { window.lwhb.cmd.push(() => { window.lwhb.removeAdUnit({ tagId: this.args.tagId }); }) } } I’m working with a third party ad provider and they have an ad page reset function in javascript that needs to be run before the new page’s ads are triggered. any improvement is welcome and I’ve already realised this on the Topic List with Johani’s code. (in an open PR). But this left the Topic … I will try your suggestion next and adopt it in both instances if that improves things further.

Ah I see, so you’re not modifying the DOM directly :ok_hand: In that case I hope routeWillChange will work - it should certainly fire before the next route is rendered. Caveat is that… in the case of things like redirects, it may fire twice. Or may fire, and then the transition ends up being aborted. But maybe that’s fine in this case.

Yes, none of that naughty direct DOM modification malarky here at Merefield Technology Towers. :sweat_smile: Yes, I’ll use the service, that’s what it’s for! I’ll revert with my experience as I’m sure the results might interest others.

Trigger javascript on clicking any page link, but before the page content loads?

Development

merefield (Robert) November 4, 2024, 12:29pm 11

So yes, that cleans up and things do happen in the right order on both routes now.

Thanks for your help!

Topic		Replies	Views
How to get around DOMContentLoaded for navigation? Development	14	663	February 21, 2025
Is there a property or observable that is triggered on transition change? Development	1	622	June 7, 2018
How do you force a script to refire on every page load in Discourse? Development	38	21636	March 12, 2020
beforePageChange plugin API? Development	1	657	December 15, 2021
How to fire on every footer load (or page load?) Development	7	2213	August 3, 2024

Trigger javascript on clicking any page link, but before the page content loads?

Related topics