# Equivalent to $(document).ready for ember

**URL:** <https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766>\
**Category:** Uncategorized\
**Created:** [September 25, 2013, 2:31pm UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766 "2013-09-25T14:31:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![moger777](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/moger777/32/14722_2.png) [@moger777](https://discuss.emberjs.com/u/moger777)\
**Post date:** [September 25, 2013, 2:31pm UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766/1 "2013-09-25T14:31:30Z")

</div>

I need to add some shims for autofocus since IE9 does not seem to support this. For a static app I could do:

```javascript
$(document).ready(function(){
  $('input[autofocus]').focus();
})

```

but this won’t work for ember since there is not full page refresh. Would be great if there was a hook that would run on route change and also wait until the dom is fully ready.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [September 25, 2013, 2:43pm UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766/2 "2013-09-25T14:43:15Z")

</div>

Ember has a ready function on App instances

```javascript
App = Ember.Application.create({
    ready: function() {
        // will be called when the app is ready
    }
})

```

There are several hooks that you can use on route change

```javascript
App.IndexRoute = Ember.Route.extend(
    activate: function() {
        // executes when router enters route for the first time
    }
);

```

But thats probably not what you want. You might want **didInsertElement** which is available on views. It would be executed when the corresponding template is rendered.

Do you want to focus everytime that the form is rendered?

---

<div class="post-metadata">

**Author:** ![moger777](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/moger777/32/14722_2.png) [@moger777](https://discuss.emberjs.com/u/moger777)\
**Post date:** [September 25, 2013, 2:53pm UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766/3 "2013-09-25T14:53:46Z")

</div>

The issue seems to be that we transition from one models form to another model of the same type. The didInsertElement only gets called the first time.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [September 25, 2013, 3:05pm UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766/4 "2013-09-25T15:05:26Z")

</div>

That sounds like its getting very specific to your setup. You have to fire an event after transitioning to another object and add your jQuery code there. Does that make sense?

---

<div class="post-metadata">

**Author:** ![hyder](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hyder/32/4053_2.png) [@hyder](https://discuss.emberjs.com/u/hyder)\
**Post date:** [September 27, 2013, 4:29am UTC](https://discuss.emberjs.com/t/equivalent-to-document-ready-for-ember/2766/5 "2013-09-27T04:29:18Z")

</div>

didInsertElement will not fire every time, when only the route context has changed. Instead schedule your event in the afterRender queue, which will make sure that the event is fired every time the view is rerendered. Related reads :

1. [Life cycle hooks in ember-views](http://madhatted.com/2013/6/8/lifecycle-hooks-in-ember-js-views),
2. [The PR in emberjs](https://github.com/emberjs/ember.js/pull/2563).

Or if you want to create a autofocused input, [this](http://emberjs.com/guides/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/) will help you a lot