# Using Ember to call a jquery function I have created

**URL:** <https://discuss.emberjs.com/t/using-ember-to-call-a-jquery-function-i-have-created/2194>\
**Category:** Uncategorized\
**Created:** [August 17, 2013, 12:33am UTC](https://discuss.emberjs.com/t/using-ember-to-call-a-jquery-function-i-have-created/2194 "2013-08-17T00:33:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JordanRDesigns](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jordanrdesigns/32/10971_2.png) [@JordanRDesigns](https://discuss.emberjs.com/u/JordanRDesigns)\
**Post date:** [August 17, 2013, 12:33am UTC](https://discuss.emberjs.com/t/using-ember-to-call-a-jquery-function-i-have-created/2194/1 "2013-08-17T00:33:05Z")

</div>

I am beginning a website project and it relies heavily on the feeling of a one page web application. We want to have sliding out panels and dynamically loading content and all the works.

But what my real question is about is wondering what the best way to mix Ember with vanilla jQuery. For instance.

I want to create a small function that will determine what link in the navigation the user clicked and thus open up a certain panel on the side of the page, that panel will have sub nav items and when one of those are clicked the whole menu will slide out revealing a page that was further behind the window if you will. That page will have some content on it but it’s not important.

What is important is that while I know I can achieve this very easily with my jQuery knowledge, I have a very limited knowledge of Ember, but I know it’s a viable option here because we would also love if we could tell our client that they can attach a URL to tweets or blog posts to highlight those various inner pages.

I know I can use resources and models to send around the information but I’ve not seen any tutorials to this point that show how to call a set of functions defined in another script with just regular jQuery when the user visits a certain route.

Is this something that’s doable?

---

<div class="post-metadata">

**Author:** ![johnernaut](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnernaut/32/14606_2.png) [@johnernaut](https://discuss.emberjs.com/u/johnernaut)\
**Post date:** [August 17, 2013, 12:56pm UTC](https://discuss.emberjs.com/t/using-ember-to-call-a-jquery-function-i-have-created/2194/2 "2013-08-17T12:56:59Z")

</div>

Perfectly doable. Check out the View object’s [didInsertElement](http://emberjs.com/api/classes/Ember.View.html#event_didInsertElement) callback. Also, check out [this blog post](http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/) for a better example of how to do it.

---

<div class="post-metadata">

**Author:** ![JordanRDesigns](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jordanrdesigns/32/10971_2.png) [@JordanRDesigns](https://discuss.emberjs.com/u/JordanRDesigns)\
**Post date:** [August 17, 2013, 10:36pm UTC](https://discuss.emberjs.com/t/using-ember-to-call-a-jquery-function-i-have-created/2194/3 "2013-08-17T22:36:04Z")

</div>

Thanks for the links, I will have to try that technique when I get to that point. But for right now I’m kind of getting the page functionality down and I feel like maybe I’m doing it wrong here. It works but it looks like it might be messy, I’m not sure though.

> **[Edit fiddle - JSFiddle - Code Playground](http://jsfiddle.net/eNdn4/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

The routes look messy and I feel like defining the sub menu over and over like that is not the best idea, I feel like there is a better way to do it. But not sure.