# Is there an event that fires when topic-lists are reloaded?

**URL:** <https://meta.discourse.org/t/is-there-an-event-that-fires-when-topic-lists-are-reloaded/78523>\
**Category:** Development\
**Created:** [1월 20, 2018, 6:22오전 UTC](https://meta.discourse.org/t/is-there-an-event-that-fires-when-topic-lists-are-reloaded/78523 "2018-01-20T06:22:08Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [1월 20, 2018, 8:46오전 UTC](https://meta.discourse.org/t/is-there-an-event-that-fires-when-topic-lists-are-reloaded/78523/4 "2018-01-20T08:46:55Z")

</div>

> [@Mittineague](#):
>
> Maybe you could use jQuery ajaxComplete ?
> 
> [ajaxComplete event | jQuery API Documentation](http://api.jquery.com/ajaxcomplete/)

YES! 😁🍾💥

That was amazingly helpful @Mittineague

thank you so much!

I ended up using:

```plaintext
$(document).ajaxComplete(function() {
	$(".topic-list").imagesLoaded(function() {
		$(".topic-list")
			.masonry("reloadItems")
			.masonry();
	});
});

```

and I would have stopped right there, however @angus was kind enough to provide what I believe is a more orthodox / targeted method for doing this in the context of Discourse here:

* * *

> [@angus](#):
>
> Another way is to add an observer in the topic-list component that observes topics. and re-runs masonry after render. i.e. something like:
> 
> ```plaintext
> withPluginApi(0.8.16, () api => {
> api.modifyClass('component:topic-list', {
> masonryObserver: function() {
> // update masonry here, probably wrapped in Ember.run.scheduleOnce('afterRender', () => {})
> }.observes('topics.[]')
> })
> })
> 
> ```

This feels like the right way to go about this, thank you so much @angus 😁🍾

I’m not sure how to go about this part:

> `probably wrapped in Ember.run.scheduleOnce('afterRender', () =&gt; {})`

But will read further about Ember Voodoo and try again. 😅

For now here’s what I ended up with based on your generous help and my basic understanding:

```plaintext
<script type="text/discourse-plugin" version="0.8.16">
    api.modifyClass("component:topic-list", {
	    masonryObserver: function() {
	    	$(".topic-list").imagesLoaded(function() {
		    	$(".topic-list")
			    	.masonry("reloadItems")
			    	.masonry();
	    	});
    	}.observes("topics.[]")
    });
</script>

```

And here’s the result:

[https://giant.gfycat.com/FeistyFormalBoa.webm](https://giant.gfycat.com/FeistyFormalBoa.webm)

Thank you so much ❤

---

_[View the full topic](https://meta.discourse.org/t/is-there-an-event-that-fires-when-topic-lists-are-reloaded/78523)._