javascript functions available via javascript_include_tag but not asset pipeline and application.js

Question

My apologies if this has been posted somewhere else, but I'm not exactly sure how to even phrase a search for this problem.

Basically, I've got fullcalendar.js sitting in app/assets/javascripts/ . Within my application.js file (in the same folder of course) I've got the following...

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

So, as expected the fullcalender.js gets swept up in the asset compiling process and ends up in the application.js that is then served to the user.

The problem comes in when I try to reference a function defined in fullcalendar.js (and thus defined in application.js after compiling the assets) it throws an error stating TypeError: $(...).fullCalendar is not a function in the js console of firebug, and of course full calendar doesn't render.

Now, however, if I include <%= javascript_include_tag "fullcalendar.js" %> in the layout file after all of the other scripts and stylesheets have been pulled in, it works as expected.

Baffled, I looked into the js in each file and compared them and can't see a difference. Is there something going on with the asset pipeline that I'm not aware of or is this some freaky DOM issue? I just have no idea at this point.

For reference, here are the contents of both the application.js and fullcalendar.js that are linked to in the page source of the site. I've only included the relevant full calendar portion of each, as it's too large for gist or pastebin if I include everything.

What baffles me is that both the sources come from the same file, one is just linked to directly, the other flows through the asset pipeline process.

application.js - http://pastebin.com/byyNErB8

fullcalendar.js - http://pastebin.com/k4p29YmP

Any insight or help would be GREATLY appreciated.

Answer 1

Maybe a dependency error. I'll suggest you to use a better practice for such lib.

1. Put the fullcalendar scripts into vendor/assets/javascripts

2. Require this script manually in application.js before the tree and after jquery and any other lib it depends.

    /=require 'fullcalendar` 

Add

Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.