jQuery Plugins and the Rails 3 Asset Pipeline -- What am i doing wrong?
I'm working on a web app in Rails 3.1, fully (I think) utilizing the asset pipeline for css, images, and js. I'm running into a pretty consistent issue when I try to implement jQuery plugins. I've been able to solve it in one case, but not in another, and I'm trying to figure out what the key issue is.
Essentially, I'll load a jQuery plugin and then call it in my document.ready
method, only to find that pulling up the site results in (for example, in the case of the jScrollPane plugin)
Uncaught TypeError: Object #<Object> has no method 'jScrollPane'
I have received the same error for several other plugins. I thought the case might be that jQuery/jQuery-UI wasn't being loaded before my plugins, so they weren't instantiated properly, but that doesn't seem to be the case. The necessary scripts are in app/assets/javascripts/...
In my app/assets/application.js
I have the following:
//= require jquery
//= require jquery_ujs
//=开发者_如何学编程 require jquery-ui
//= require jquery.mousewheel
//= require mwheelIntent
//= require jquery.jscrollpane.min
//= require_tree .
The resultant application.js
appears to be correct, other than the errors; that is, everything I would expect to be there is there.
What am I doing wrong? I'm happy to provide any additional information necessary.
One gotcha with the asset pipeline if you're not using it regularly is that if you have assets pre-compiled and dumped into public/assets/application.js
then it that precompiled file can clobber the files as they're generated by the development asset pipeline, so plugins you've included in /app/assets/application.js
are overwritten.
In other words, the previous, all singing, all-dancing jquery object you're meticulously building with this snippet here:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery.mousewheel
//= require mwheelIntent
//= require jquery.jscrollpane.min
//= require_tree .
Is overwritten by the already compiled code describing a jQuery object in public/assets/application.js
.
Well, that's what just bit me, when a page I was debugging was exhibiting very similar behaviour to this one.
Compressors that work on Javascript can be fussy about the coding style of plugins.
I have found in a couple of cases code isn't found if the plugin is missing a closing ; at the end. The compressor can rename the next function if it thinks it is inside the precceding block.
Try reordering your plugins and see if that changes the missing method. That might give you clue as to where the missing ; is, if that is the problem.
精彩评论