### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [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/1 "2017-11-27T04:36:06Z")
One the most amazing things about Discourse is that it is a Single Page Application. The page is loaded once and the content is swapped on demand - This is my understanding.
I was trying to integrate [Masonry](https://masonry.desandro.com/) with Discourse and ran into a small problem.
I got Masonry to load great on first page load and everything works great:
However, if I navigate to another topic-list page or select a category then it does not work anymore and I get this:
The method I use to call Masonry is to add the script below to the ``
```
```
* * *
I understand why the issue occurs - I think. It occurs because the script is only loaded and fired on initial page load.
This means that the `` element is not reloaded on every page load.
So, logically, my next step was to see if I can add the script somewhere where it will get run again when new content loads.
So I tried
- ``
- ``
Without luck. For some reason the script never fires again after initial page load.
**So, my question is how can I make sure this script runs on every page load? (for now… selective logic will come in later)**
```
```
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [27 نوفمبر 2017، 5:44ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/2 "2017-11-27T05:44:37Z")
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/initializers/page-tracking.js.es6#L11-L27](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/initializers/page-tracking.js.es6#L11-L27)
Look at the above script. This is how we call Google Analytics on every page reload.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [27 نوفمبر 2017، 6:44ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/3 "2017-11-27T06:44:46Z")
That’s a great idea @vinothkannans Thanks!
Might take a whole bunch of time to replicate the method with the script I intend to use (due to my amazing scripting skills 🙃) but I’m now glad I found an official example to lean back on.
Will update this post if I get anywhere.
Thank you!
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [27 نوفمبر 2017، 2:26م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/4 "2017-11-27T14:26:24Z")
So, I spent a bit of time looking at this and I still do not have a proper solution, however I have found a temporary workaround.
I have found that [.ajaxComplete](http://api.jquery.com/ajaxcomplete/) is triggered in Discourse when new content is loaded.
_Small issue: It’s triggered three times on every page load._
Ignoring that small hick up for now (remember… this is a workaround), I modified the code to fire on `.ajaxComplete`
Final code for the workaround:
```
$( document ).ajaxComplete(function() {
$(".topic-list").imagesLoaded(function() {
$(".topic-list").masonry({
itemSelector: ".topic-list-item"
});
});
});
```
The above script runs on every page load in Discourse and that’s what I wanted to achieve.
Masonry now works well on initial and subsequent page loads.
I will continue to investigate and will post a more proper method one I have something solid.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [27 نوفمبر 2017، 8:01م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/5 "2017-11-27T20:01:06Z")
I think you can use the PluginAPI `onPageChange` function to do what you are looking for. See: [Using the JS API](https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281)
Here’s an example function:
```js
```
* * *
**Update:** If you are looking to apply similar changes to post bodies, see [post #26 below](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/26).
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [27 نوفمبر 2017، 8:03م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/6 "2017-11-27T20:03:44Z")
Do you need to use “document” as the base? AFAIK, that will have a lot more events depending on how often and what polling returns. I think if you can focus it more to a page element it should work better for you.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [28 نوفمبر 2017، 2:03ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/7 "2017-11-28T02:03:11Z")
Ha! 😁 That’s the one!
That’s the proper solution I’ve been trying to work out. Thank you so much @simon.
I modified my hacky workaround to the the method you highlighted and everything works like magic now 😀
The current version I have is
```
```
Which does what I need it to do in terms of firing once on every page load.
My next step is apply a bit of selective logic so that it does not fire on pages where there is no topic-list.
Will post updates as I get there.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [28 نوفمبر 2017، 2:08ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/8 "2017-11-28T02:08:13Z")
> [@Mittineague](#):
>
> Do you need to use “document” as the base? AFAIK, that will have a lot more events depending on how often and what polling returns. I think if you can focus it more to a page element it should work better for you.
You’re totally correct, the “document” is a very broad base. I was trying to find a more specific element but could not for `.ajaxComplete`
Regardless, I think I won’t be needing that script anyway because @simon was kind enough to highlight a method for firing a script with the pluginAPI on page change, which is a lot cleaner and a lot more efficient.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [28 نوفمبر 2017، 5:56ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/9 "2017-11-28T05:56:27Z")
> [@lll](#):
>
> My next step is apply a bit of selective logic so that it does not fire on pages where there is no topic-list.
The `onPageChange` function is passed a `url` parameter. You might be able to use it to check what page you’re on.
```js
```
There is also a PluginApi function for reopening a class. Reopening the `topic-list` class and hooking into `didInsertElement` would probably work.
```js
```
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [29 نوفمبر 2017، 12:28م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/10 "2017-11-29T12:28:48Z")
This is amazing @simon I never would’ve thought it to be so flexible! 😍
I really like the first method and I will proceed with that.
I will play around a bit with url based filtering and if everything works well with single urls (`/latest`), (`/new`) and combined (`/tags/c/site-feedback/foo`), (`/c/site-feedback/`), I will update this post again with the what I have.
😀
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [30 نوفمبر 2017، 3:17ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/11 "2017-11-30T03:17:01Z")
Small update:
So I was trying to make masonry work inside posts to create a gallery if image uploads follow certain structure and it’s something like this:
```
...
...
...
....
```
This will result in the images being organized by masonry to look like this:
However, clicking any of the images will open the native discourse lightbox, which I like very much!
My issue this time is similar to the issue in the original post, where the script is fired if page is visited directly or on initial page load but not if reached after visiting any other page on discourse.
The script I am using is:
```
```
After every page load I see “mgallery loaded” in the console like expected but the issue persists.
In summary,
**this method of loading a script via the pluginAPI seems to work really well if used for masnory in the topic list pages, however, it does not seem to work in post pages.**
**What should I be looking at next?**
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [4 ديسمبر 2017، 11:12ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/12 "2017-12-04T11:12:51Z")
Still having the same issue in getting the script to fire on `/t/` pages after initial load.
Here’s what happens,
I visit the post page directly, script fires, gallery is arranged via masonry and I get the console log message I expect.
I navigate within the app, then return to post page (not initial page load anymo) the script does fire and I get the console message but masonry is not actually working.
Here’s the code I’m using now.
**HTML**
```plaintext
```
hacky, I know 😋
still need to understand how to create custom `[foo]...[/foo]` tags
or white list some html `...
`
* * *
**CSS**
not relevant here so I will skip it.
* * *
**JS:**
```plaintext
```
Everything works on initial page load:
but not on subsequent page loads.
even when the console log indicates that the script has re-fired.
* * *
The confusing part is that I use the same method to initialize masonry on topic-list pages and it **works just fine on both initial and subsequent page loads**
using this script:
```plaintext
```
**Is there anything special about topic pages** (`/t/`) **- when compared to topic-list pages - that would prevent masonry script from working as intended on every post page load within the app?**
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [14 ديسمبر 2017، 10:12ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/14 "2017-12-14T10:12:16Z")
This may or may not be a bug. I cannot really tell.
## Problem:
jQuery scripts do not fire `onPageChange` when the destination is a topic as consistently as they do when the destination is a discovery route.
## Basic example script:
```plaintext
api.onPageChange((url, title) => {
console.log('the page changed to: ' + url + ' and title ' + title);
$(".regular>.cooked>p").addClass("foo-class");
});
```
## Expected result:
On every page loaded, the page title and url are logged to console and every `.regular>.cooked>p` element gets the class `.foo-class` added to it.
And this is exactly what happens on initial page load (if topic is accessed via direct url)
As you can see above, every `` tag has the class `.foo-class` added to it and the console logs the page information as instructed.
* * *
## Actual result
If you navigate away from the topic and go back in or if you go visit another topic by clicking a link from within the app (where the content is loaded via the app), the script behaves differently.
The console logs the page information like before, but the jQuery part is not picked up.
notice how the `
` tags don’t have the class `.foo-class` added even though the console indicates that the script was executed
* * *
For the record, here's the full script and I add it to the `` section of the common theme:
```
```
* * *
I also went through the entire `plugin-api.js` file and did not find any alternative to `onPageChange`
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [21 مارس 2018، 8:19م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/15 "2018-03-21T20:19:19Z")
> [@lll](#):
>
> jQuery scripts do not fire onPageChange when the destination is a topic as consistently as they do when the destination is a discovery route.
Did you ever get to the bottom of this? I was trying to do something simple with jQuery earlier and it seems like api.onPageChange isn’t the right solution.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [21 مارس 2018، 9:00م UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/16 "2018-03-21T21:00:20Z")
I have been working on something that needs to be fired when entering a topic. I don’t know if this is overly complicated or the proper way to do it, but this is what I’ve found works well so far:
```plaintext
```
Try this out in a theme component. It will add the word “Test” to the first post in every topic.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [22 مارس 2018، 3:21ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/19 "2018-03-22T03:21:08Z")
> [@awesomerobot](#):
>
> Did you ever get to the bottom of this?
Yes and no, I don’t know why topic pages seem to behave differently here but I have found a couple of workarounds.
~~If you want to do something only once when a topic page is loaded, then matching the url for `/t/` seems to work.~~
~~Like so:~~
~~
```plaintext
```
~~
**Edit:**
* * *
_Nope 😅, this will still log stuff to console but still very finicky about everything else and will only work with a jQuery function if the page is the first the user views and not on in-app navigation this is either a bug or something is running out of order. I don’t see any errors in the log though_
For this use case @tshenry’s method works really well. 😁👌 So I’m adapting it going forward.
**The method below still works though for Ajax content**
* * *
However, if you want to modify content including content that’s loaded later on after scrolling, you’d need a slightly more complicated workaround.
This is not entirely clean but still a little bit efficient. It could still be vastly improved.
in brief, you bind whatever you want to do to an `ajaxSuccess` handler while on topic pages and then unbind after leaving topic pages.
```plaintext
```
This will fire 2-3 times when entering a topic and when new content is loaded while on topic pages, but will not fire outside of topic pages. This is still far from ideal but so far is the only way I’ve manged to do this and make changes to content loaded later on after scrolling.
One possible room for improvement is to move the unbind function from the url based `if` `else` statement to a `cleanupStream` function which would only fire once when exiting a topic page. However, I still have not figured out how to fully use it.
For reference it’s here:
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L332-L340](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L332-L340)
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [24 مارس 2018، 3:22ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/20 "2018-03-24T03:22:27Z")
Alright, here’s one more update on this. I think I maybe on to the reason why `api.onPageChange` does not work for topic pages and the answer might be this:
> [@zogstrip](#):
>
> We recently refactored our topic views to use virtual-dom
With that in mind here’s the new way I settled on for firing a script once a user enters a topic page and doing a bit of clean up after leaving the topic page. This could still be improved I suppose but for now will only fire once when entering a topic and once when leaving.
```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
});
},
deactivate: function() {
this._super();
// clean up here when leaving the topic page
}
});
```
As far as I tested, this will both log stuff to the console and ~~work with jQuery.~~ **edit: Nope. Again 😅**
If anyone is interested in the breadcrumbs I came accross to put this together check these posts / topics out:
> **breadcrumbs**
>
> [https://meta.discourse.org/t/accessing-the-createtopic-action-while-on-a-topic-route/26423](https://meta.discourse.org/t/accessing-the-createtopic-action-while-on-a-topic-route/26423)
>
> [A tour of how the Widget (Virtual DOM) code in Discourse works - #59 by david](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/59)
>
> [https://meta.discourse.org/t/using-jquery-to-add-a-link-to-a-group-badge/40563](https://meta.discourse.org/t/using-jquery-to-add-a-link-to-a-group-badge/40563)
>
> [https://meta.discourse.org/t/customizing-the-home-screen-to-show-tiles-for-topics/16713/2](https://meta.discourse.org/t/customizing-the-home-screen-to-show-tiles-for-topics/16713/2)
>
> [https://meta.discourse.org/t/how-to-insert-static-welcome-text-block-on-categories-page/16090/5](https://meta.discourse.org/t/how-to-insert-static-welcome-text-block-on-categories-page/16090/5)
>
> [https://meta.discourse.org/t/wip-list-of-all-the-hooks-in-discourse/11505](https://meta.discourse.org/t/wip-list-of-all-the-hooks-in-discourse/11505)
>
> [A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/1)
Once I figure out how to fire a script once every time the post stream is updated I will post another update here.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [24 مارس 2018، 3:35ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/21 "2018-03-24T03:35:34Z")
This is really interesting! Definitely different than anything I’ve worked with in theme dev so far. Looking forward to checking out the breadcrumbs and trying to get a deeper understanding of what all is going on. Thanks for the update 😀
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [24 مارس 2018، 3:47ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/22 "2018-03-24T03:47:43Z")
> [@lll](#):
>
> how to fire a script once every time the post stream is updated
Maybe try this?
> **[ajaxComplete event | jQuery API Documentation](https://api.jquery.com/ajaxcomplete/)**
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [24 مارس 2018، 3:50ص UTC](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/23 "2018-03-24T03:50:55Z")
You’re correct @Mittineague and that’s what I’m using now.
There’s only one small hick up which is I cannot seem to get it to work with anything except for the entire `document` which as you may have already guessed it, would mean it fires 2 or three times each time more posts are loaded into the post stream.
It would be really great if I can use it with the post stream as the base but so far I have not been able to do so.
However, my testing my be a bit off so I will try this again 👌
[Next page](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856.md?page=2)