# Is There Any Hook That Runs After The Dom Settles
**URL:** https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454
**Category:** Uncategorized
**Created:** [March 28, 2018, 3:22pm UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454 "2018-03-28T15:22:47Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@tundebabzy](https://discuss.emberjs.com/u/tundebabzy)
#### Post date: [March 28, 2018, 3:22pm UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/1 "2018-03-28T15:22:47Z")
I’m learning Ember JS with Foundation CSS framework but I’m having a _little_ problem with instantiating a plugin.
I’m instantiating the javascript plugin in `application.hbs` like this:
```auto
...
{{outlet}}
```
I also have a component:
```auto
```
The problem is that by the time the plugin is instantiated and run, `each` helper has not added the `li` tags to the DOM causing the plugin to misbehave.
After a lot of research into the docs, I settled for the `didRender` hook to instantiate the plugin. I noticed `didRender` runs multiple times for the same component so I added code to prevent multiple instantiation. My question is, is there a better way?
---
### Author:  [@Gaurav0](https://discuss.emberjs.com/u/Gaurav0)
#### Post date: [March 28, 2018, 5:48pm UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/2 "2018-03-28T17:48:19Z")
Typically I `run.schedule('afterRender', ...)` in `didInsertElement`
---
### Author:  [@tundebabzy](https://discuss.emberjs.com/u/tundebabzy)
#### Post date: [March 29, 2018, 7:18am UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/3 "2018-03-29T07:18:30Z")
I actually tried this before settling for `didRender` although I was calling `scheduleOnce`. I changed my code to use `schedule` and inserted it in the `didRender` and `didInsertElement` hooks and both worked. I think I’ll settle for the `didInsertElement` since although `didRender` is the only hook that is guaranteed to fire after the DOM has settled, it is also going to fire during updates.
Thanks for your response. It helped me.
---
### Author:  [@ef4](https://discuss.emberjs.com/u/ef4)
#### Post date: [April 3, 2018, 11:38am UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/4 "2018-04-03T11:38:54Z")
`didInsertElement` is the right hook for this kind of thing.
It looks like Foundation supports initializing a specific element at a time, instead of trying to do the whole document. That makes more sense when using a client-side framework like Ember.
I would remove `$(document).foundation()` and just do:
```auto
didInsertElement() {
this.$().foundation();
}
```
in any component that uses Foundation features.
---
### Author:  [@tundebabzy](https://discuss.emberjs.com/u/tundebabzy)
#### Post date: [April 5, 2018, 3:18pm UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/5 "2018-04-05T15:18:34Z")
Hi. I am facing another issue that is rooted to knowing when the DOM has settled.
I have components something like:
```auto
{{! parent-component.hbs}}
{{child-component data=model}}
```
```auto
{{! child-component.hbs}}
{{#each data.attributes as |field|}}
{{component concat(field.fieldtype "-control")}}
{{/each}}
```
What I am trying to achieve is to dynamically add some components to the page and that is working as expected. The only problem with my code is that after `child-component` is through with it’s work, `parent-component` is supposed to rearrange the components (grid layout stuff).
Initially, I hooked into `didInsertElement` to `schedule` into the `afterRender` queue. This didn’t work as the children components were not yet added to the DOM.
The solution I’m working on is to have each of the child components fire a custom event after they are rendered. I believe this can be done in the `didRender` hook of each of the child components. `parent-component` can then listen for these events and `schedule` into the `afterRender` queue.
Is this a good idea or is there something in-built that I should be doing instead?
---
### Author:  [@tundebabzy](https://discuss.emberjs.com/u/tundebabzy)
#### Post date: [April 6, 2018, 9:06am UTC](https://discuss.emberjs.com/t/is-there-any-hook-that-runs-after-the-dom-settles/14454/6 "2018-04-06T09:06:11Z")
> [@tundebabzy](#):
>
> Initially, I hooked into didInsertElement to schedule into the afterRender queue. This didn’t work as the children components were not yet added to the DOM.
So I discovered that this approach was correct. Some parts of the code was actually buggy. Sorry for the noise.