# JQuery UI, Bootstrap 3 etc

**URL:** <https://discuss.emberjs.com/t/jquery-ui-bootstrap-3-etc/2525>\
**Category:** Design\
**Created:** [September 9, 2013, 4:50am UTC](https://discuss.emberjs.com/t/jquery-ui-bootstrap-3-etc/2525 "2013-09-09T04:50:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brendan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/brendan/32/14555_2.png) [@Brendan](https://discuss.emberjs.com/u/Brendan)\
**Post date:** [September 9, 2013, 4:50am UTC](https://discuss.emberjs.com/t/jquery-ui-bootstrap-3-etc/2525/1 "2013-09-09T04:50:27Z")

</div>

Now I love Ember.js but integrating virtually anything that would be deemed as web standard is sheer torture.

I understand the purpose and concept behind `didInsertElement` but how and where to put related JS code for JQuery UI or Bootstrap makes everything that should be simple much more difficult than it should be.

Am I missing something here? Bootstrap-for-Ember looks promising but it isnt a fix for the issue at hand.

Where do I put document ready functions to initialize js code? And what is the mapping for $.this() etc to all the way elements are called normally?

Love Ember but this is killing me.

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [September 9, 2013, 3:08pm UTC](https://discuss.emberjs.com/t/jquery-ui-bootstrap-3-etc/2525/3 "2013-09-09T15:08:35Z")

</div>

> [@Brendan](#):
>
> And what is the mapping for $.this() etc to all the way elements are called normally?

Are you referring to `this.$()` in `didInsertElement`? This is the current view DOM node as a jQuery object. This allows you to do anything inside that view. You can use `elementId`, `tagName`, `classNames`, etc. to customize that node. From there you can do something like:

```js
this.$().find('.my-class').tooltip({...});

```

You can also create custom functions and place your code in `Ember.run.scheduleOnce`, like so (this was for GMaps popovers):

```js
Ember.run.scheduleOnce('afterRender', hiddenPopup, function () {
  // 'this' is 'hiddenPopup'
  var $detached = this.$().detach();

  popup.setContent($detached.get(0));
  this.toggleProperty('isVisible');
});

```

Where `afterRender` specifies that you want to run the callback only after the view is rendered in the DOM.