# Call a plain jquery function that's in a different file

**URL:** <https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812>\
**Category:** Design\
**Created:** [September 28, 2013, 3:49pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812 "2013-09-28T15:49:03Z")\
**Posts on this page:** 11\
**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:** [September 28, 2013, 3:49pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/1 "2013-09-28T15:49:03Z")

</div>

Is there a way to put a function in something like main.js and then in app.js call it properly?

For an instance I have this in app.js right now…

```
App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
	actions: {
		newIngredient: function() {
			newIngredient();
		}
	}
});
App.IndexController = Ember.ObjectController.extend({
	actions: {
		submit: function() {
			alert('submited');
		}
	}
});
// New ingredient button
function newIngredient() {
	$('<input class="ingredient-input" type="text" name="ingredient" /><br>').fadeIn().insertBefore($('#ingredient-btn'));
	$('input:last').focus();
}

```

But I would like to move that function into a different file (main.js) to keep things organized (my type A coming out).

What is the best way to get this done, I’ve done some searching but being so new at ember still there are some things talked about that I either can’t follow or don’t feel like are really solving such a simple problem.

---

<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 28, 2013, 3:59pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/2 "2013-09-28T15:59:32Z")

</div>

Hi Jordan,

You can put that function anywhere as long as the script is included in HTML. As long as the function is available in global scope, you’ll be able to access it.

Looking at your code, you’re going to have a hard time doing what you’re doing. The Ember way of doing this would be to put that input field into a template and have the submit button trigger the event that should be handled in the route.

You might want to checkout my article on Ember Sherpa [embersherpa.com](http://embersherpa.com/articles/crud-example-app-without-ember-data/) it will give you a good overview of bunch of things that’s helpful to know when starting with Ember.

---

<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:** [September 28, 2013, 6:02pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/3 "2013-09-28T18:02:54Z")

</div>

Thanks for that link, using something I saw there I did some more digging and found this fiddle which helped me do this with ember…

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

Basically I now have this…

```
App.InputFormView = Ember.View.extend({
templateName: 'input-form',
ingrs: [{ingredient: ''}],
newIngredient: function(){
	this.get('ingrs').pushObject({ingredient: ''});
},
submit: function(){
	alert(this.get('ingrs'));
}

```

});

My problem now is how can I get the values from the inputs.

My template looks like this…

```
<script type="text/x-handlebars" data-template-name="input-form">
{{#each view.ingrs}}
	{{input valueBinding="ingredient" classNames="ingredient-input"}}<br>
{{/each}}
<button id="ingredient-btn" {{action "newIngredient" target="view"}}>New Ingredient</button><br>
<button id="submit-btn" {{action "submit" target="view"}}>Find Me Something to Eat!</button>

```

I’ve tried to figure out how to grab those inputs as a list of ingredients so I can use them with an API later.

EDIT: Just noticed the “JSON.stringify” at the bottom of that fiddle which was commented out and using that I can alert the contents but I’m still not sure how to grab those values.

---

<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 28, 2013, 6:48pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/4 "2013-09-28T18:48:54Z")

</div>

@JordanRDesigns here you go [Edit fiddle - JSFiddle - Code Playground](http://jsfiddle.net/EkJwA/17/)

I added an **ApplicationRoute** , it handles **save** action that’s triggered by the template.

```javascript
App.ApplicationRoute = Ember.Route.extend({
    actions: {
        save: function(content){
            var data = [];
            content.map(function(item) {
                data.push(item.getProperties(['name','bio']));
            });
            console.log(data);
        }
    }
});

```

In the template, I’m passing the value of view.content to the **save** action handler.

```nohighlight
    <button {{action 'save' view.content}}> save form </button>

```

---

<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:** [September 28, 2013, 7:00pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/5 "2013-09-28T19:00:29Z")

</div>

With this update I’m still getting [object Object] when I alert

My JS

```
App.ApplicationRoute = Ember.Route.extend({
    actions: {
	submit: function(ingrs){
		var data = [];
		ingrs.map(function(item){
			data.push(item.getProperties(['ingredient']));
		});
		alert(data);
	    }
    }
});

App.InputFormView = Ember.View.extend({
    templateName: 'input-form',
    ingrs: [Em.Object.create({ingredient: ''})],
    actions: {
	newIngredient: function(){
		this.get('ingrs').pushObject(Em.Object.create({ingredient: ''}));
	}
    }
});

```

My HTML

```
{{#each view.ingrs}}
	{{view App.FocusField valueBinding="ingredient" classNames="ingredient-input"}}<br>
{{/each}}
<button id="ingredient-btn" {{action "newIngredient" target="view"}}>New Ingredient</button><br>
<button id="submit-btn" {{action "submit" view.ingrs}}>Find Me Something to Eat!</button>

```

here is a jsfiddle

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

---

<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 28, 2013, 7:09pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/6 "2013-09-28T19:09:09Z")

</div>

Don’t **alert** 🙂 Use `console.log` Also, can you give me a link to your updated fiddle?

---

<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:** [September 28, 2013, 7:12pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/7 "2013-09-28T19:12:32Z")

</div>

That’s all it was? Geez, thanks man. So now if I want to do something with that like use it as end points in an API how would I iterate over each?

For instance I know I can get a specific element like so…

```
console.log(data[0].ingredient);

```

But what would b the best way to iterate over the whole object and just get out those values?

---

<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 28, 2013, 7:32pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/8 "2013-09-28T19:32:10Z")

</div>

My next article is going to be about preloading data from APIs, in the mean time, [checkout this article](http://nerdyworm.com/blog/2013/04/03/ember-initializers/).

Remember to convert your objects to Ember objects by with `Em.Object.create(item)`, its not enough to just insert them into content array because the plain JavaScript objects won’t have Ember methods

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [September 29, 2013, 5:27am UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/9 "2013-09-29T05:27:36Z")

</div>

Just a quick tip on the console.log.

If you want to see all the values just pass the whole object. console.log is a function that can take multiple values. You can mix and match text and values, even whole objects and arrays. For example

```
console.log("My data %O", data);

```

The capital O tells the console to print the whole object. If it was a string you could also do something like:

```
console.log("My string is %s", string_variable);

```

You could even pass in multiple values.

```
console.log("First string: %s Second string: %s", string1, string2);

```

Going back to your array you could even display arbitrary values:

console.log(data[0].ingredient);

```
    console.log("First value: %s Second value: %s", 
                       data[0].ingredient, 
                       data[1].ingredient );

```

and so on.

More details on console.log here:

> **[Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)**
>
> Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

- **%s** Formats the value as a string.
- **%d or %i** Formats the value as an integer.
- **%f** Formats the object as a floating point value.
- **%o** Formats the value as an expandable DOM element (as in the Elements panel).
- **%O** Formats the value as an expandable JavaScript object.
- **%c** Applies CSS style rules to output string specified by the second parameter.

---

<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 29, 2013, 2:08pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/10 "2013-09-29T14:08:40Z")

</div>

@eccegordo, do you mind if I _borrow_ this for a debugging article on Ember Sherpa?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [September 29, 2013, 2:32pm UTC](https://discuss.emberjs.com/t/call-a-plain-jquery-function-thats-in-a-different-file/2812/11 "2013-09-29T14:32:36Z")

</div>

No problem have at it.

Post a link to article here when you are done. I am always looking for better debugging tips.