# How do you force a script to refire on every page load in Discourse?

**URL:** https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856
**Category:** Development
**Created:** [11월 27, 2017, 4:36오전 UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856 "2017-11-27T04:36:06Z")
**Posts on this page:** 1
**Showing post:** 27

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [3월 24, 2018, 11:18오전 UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/27 "2018-03-24T11:18:05Z")

</div>

Oh wow 😱 That is exactly what I’ve been searching for for the last 3 months! ❤❤❤

This is really good @vinothkannans, thank you so much!

It works for me like this:

```plaintext
var selector = 'div[data-theme-tiles="1"]';

api.decorateCooked($elem =>
	$elem
		.children(selector)
		// do your work here for example:
		.imagesLoaded(function() {
			$(selector).masonry({
				itemSelector: ".lightbox-wrapper"
			});
		})
);

```

And it just works! no excessive firing, no bloat. Amazing! 🔥🔥

* * *

**So, to recap all the stuff from earlier:** (from my basic understanding which maybe off)

This will work if you want something done when topic pages are opened:

```plaintext
const TopicRoute = require("discourse/routes/topic").default;

TopicRoute.reopen({
	activate: function() {
		this._super();
		Em.run.next(function() {
			// do stuff here when a topic page is opend
		});
	}
});

```

And you _can_ do stuff **HOWEVER** , you wont be able to modify the contents of the topic because they are in virtual dom and that’s why jQuery was not able to modify the topic contents while it was able to do stuff like `console.log` and modify parts of the pre-existing actual dom like this:

```plaintext
const TopicRoute = require("discourse/routes/topic").default;

TopicRoute.reopen({
	activate: function() {
		this._super();
		Em.run.next(function() {
			console.log("topic page opened");
			$("body").css(
				"background-color",
				"#" + ((Math.random() * 0xffffff) << 0).toString(16)
			);
		});
	}
});

```

In the same way, this can be used to make changes when the user leaves a topic page:

```plaintext
const TopicRoute = require("discourse/routes/topic").default;

TopicRoute.reopen({
	deactivate: function() {
		this._super();
		console.log("topic page closed");
		// do more stuff here or a bit of cleaning up
	}
});

```

Again you can do whatever you need here because the user will be leaving the topic and so you would not be modifying the virtual dom contents of the topic anyways.

Moreover;

```plaintext
api.onPageChange(url => {
	// do stuff here
});

```

Will also work on topic pages however, the same from above will still apply. You cannot modify the actual contents of the topic (again, they are in virtual dom) but you can modify elements in the pre-existing dom.

So this would work, even on topic pages:

```plaintext
api.onPageChange(url => {
	$("body").css(
		"background-color",
		"#" + ((Math.random() * 0xffffff) << 0).toString(16)
	);
});

```

Once I get a firmer grip on this I will probably create a how-to topic with the relevant bits

Thanks again @vinothkannans 🌻

---

_[View the full topic](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856)._