How to import javascript in rails with asset pipeline

Question

in my app I have one controller supporting a quite complex object that has a lot of javascript, written in coffescript.

I would like to arrange the javascript on several separate files so to have the code arranged more nicely, although I can't figure out how to import these extra files.

for example I have the file app/assets/javascripts/general_functions.js.coffee containing the following:

# rounds a number
roundNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.round(rnum*pow)/pow
  parseFloat(newnumber)

# floors a number
floorNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.floor(rnum*pow)/pow
  parseFloat(newnumber)

# returns true if the str ends with suffix
endsWith = (str, suffix) ->
  str.indexOf(suffix, str.length - suffix.length) !=   -1

# returns the absolute value of a number (always >= 0)
abs = (num) -> 
  if num < 0 then - num else num

How do I import it in my app/assets/javascripts/projects.js.coffee that needs these functions?

I've tried with adding

//= require general_functions

to app/assets/javascripts/application.js, with no success

any ideas?

thanks,

mu is too short · Accepted Answer · 2013-07-17 15:42:07Z

1

By no success I'm guessing that the browser is telling you that none of your general_functions.js.coffee functions exist and you're getting errors like:

ReferenceError: roundNumber is not defined

You have a simple scoping issue. The compiled version of CoffeeScript files are wrapped in a self-executing function to prevent namespace pollution so this:

roundNumber = (rnum, rlength = 5) ->
  pow = Math.pow( 10, rlength )
  newnumber = Math.round(rnum*pow)/pow
  parseFloat(newnumber)

looks like this when it gets to the browser:

(function() {
  var roundNumber;
  roundNumber = function(rnum, rlength) {
    // ...
  };
})();

and all the functions you've defined are hidden. If you want your functions to be global, then define them as window properties:

window.roundNumber = (rnum, rlength = 5) ->
  # ...

Or better, you can create an application-specific namespace somewhere before the main (Coffee|Java)Script is loaded:

app = { }

and put your functions in there:

app.roundNumber = (rnum, rlength = 5) ->
  # ...

answered Jul 17, 2013 at 15:42

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Don Giulio Over a year ago

I think you got the right point. How would you create the namespace?

mu is too short Over a year ago

@dongiulio: You could simply add a var whatever_your_namespace_is_called = { }; to the top of your application.js, anything in there that isn't a comment should get copied through to the final JavaScript blob. You could also put that declaration in your layout (before you pull in the JavaScript) or another JavaScript file that you pull into application.js before anything else but I think tossing it right into application.js is probably the easiest.

Don Giulio Over a year ago

Thanks, I added the var app = {}; line just after the jquery inclusion and it all seems to work now, thanks a lot.

Dennis · Accepted Answer · 2013-07-17 14:48:33Z

0

Javascript should be automatically included in your rails application, every controller has its own js file. Using the instructions below will include them.

Your app/assets/javascripts/application.js.coffee should have this line included:

#= require_tree .

Or app/assets/javascripts/application.js (plain javascript):

//= require_tree .

When you are viewing your page's source in your browser you should see something like:

<script src="/assets/projects.js?body=1"></script>

What you are describing is a helper or more global js file with generic features. You could add these to the application.js. Moreover, using a structure like below will include vendor/assets/javascripts/some_generic_feature.js(.coffee)

//= require some_generic_feature

edited Jul 17, 2013 at 14:48

answered Jul 17, 2013 at 14:41

Dennis

7766 silver badges17 bronze badges

Comments

cortex · Accepted Answer · 2013-07-17 14:52:26Z

0

In application.js add both files in the correct order:

application.js

//= require general_functions
//= require projects

Hope this helps!

answered Jul 17, 2013 at 14:52

cortex

5,2543 gold badges34 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to import javascript in rails with asset pipeline

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related