Rails asset pipline and Jquery plugins issue -
i using rails jquery gem.
i have following in application.js
//= require jquery //= require jquery_ujs //= require_tree . do these declarations include files in order ?
i using jquery pluging textareaexpander (http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/)
i getting js error
jquery("textarea[class*=expand]").textareaexpander(); on last line of plugin below
// initialize expanding textareas jquery(document).ready(function() { jquery("textarea[class*=expand]").textareaexpander(); }) i don't ? because jquery hasn't been loaded. why textareaexpander still not defined ?
for reference below rest of code in plugin file.
(function($) { // jquery plugin definition $.fn.textareaexpander = function(minheight, maxheight) { var hcheck = !($.browser.msie || $.browser.opera); // resize textarea function resizetextarea(e) { // event or initialize element? e = e.target || e; // find content length , box width var vlen = e.value.length, ewidth = e.offsetwidth; if (vlen != e.vallength || ewidth != e.boxwidth) { if (hcheck && (vlen < e.vallength || ewidth != e.boxwidth)) e.style.height = "0px"; var h = math.max(e.expandmin, math.min(e.scrollheight, e.expandmax)); e.style.overflow = (e.scrollheight > h ? "auto" : "hidden"); e.style.height = h + "px"; e.vallength = vlen; e.boxwidth = ewidth; } return true; }; // initialize this.each(function() { // textarea? if (this.nodename.tolowercase() != "textarea") return; // set height restrictions var p = this.classname.match(/expand(\d+)\-*(\d+)*/i); this.expandmin = minheight || (p ? parseint('0'+p[1], 10) : 0); this.expandmax = maxheight || (p ? parseint('0'+p[2], 10) : 99999); // initial resize resizetextarea(this); // 0 vertical padding , add events if (!this.initialized) { this.initialized = true; $(this).css("padding-top", 0).css("padding-bottom", 0); $(this).bind("keyup", resizetextarea).bind("focus", resizetextarea); } }); return this; }; })(jquery); // initialize expanding textareas jquery(document).ready(function() { jquery("textarea[class*=expand]").textareaexpander(); }); as can see function textareaexpander first defined extending jquery , called on document ready still not working. have similar issues other plugins on of them chosen.js.
if 1 can point out issue , elaborate causing this, because me doesn't make sense ( missing point here).
relevant code
development.rb config.assets.compress = false config.assets.debug = true application.rb config.assets.enabled = true config.assets.version = '1.0 ok did experiment suggested check if syntax issue, turns out isn't.
i did experiment, if remove line
//= require_tree . from application.js , instead replace with
//= require_self and in view file (the view being rendered) add following @ end
= javascript_include_tag 'libs/jquery.textarea-exapander' all seems work perfectly. ideas ?
more info
app/assets/javascript |- application.js |- chosen.jquery.js |- admin/ |- categories.js.coffee |- libs/ |- jquery.textarea-exapander.js |- modernizr.js |- platformselector.js |- waypoints.js |- gmaps4ails/ |- gmaps4rails.base.js |- gmaps4rails.bing.js |- gmaps4rails.googlemaps.js my application.js
//= require jquery //= require jquery_ujs //= require_tree . code layout
%html %head %title whatever %link{type:"text/css",rel:"stylesheet", href:"http://fonts.googleapis.com/css?family=abel"} = stylesheet_link_tag "application", :media => "all" = stylesheet_link_tag 'gmaps4rails' = javascript_include_tag "application" = csrf_meta_tags %body = render 'shared/header' %div#main.inside.topadd = yield %div.wrapper =render 'shared/footer' = yield :scripts the above setup not work
the following setup works
my application.js
//= require jquery //= require jquery_ujs inside registrations/new.html.haml
some bla bla bla bla haml code = javascript_include_tag 'libs/jquery.textarea-exapander' this works, same true other plugin chosen.js if include in after view works otherwise gives same error .chosen not function.
so comments looks wrong local setup
i have noticed strange thing in html on heroku , local
this body class on heroku
linux js gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0 but on local body class
js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths linux gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0 js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths i seeing every rails app locally
<div id="cboxoverlay" style="display: none;"></div> <div id="colorbox" class="" style="padding-bottom: 0px; padding-right: 0px; display: none;"></div> after body starts ,
<div id="supersized-loader"></div> <div id="supersized"></div> before body ends not using neither including color box far...
what going on ??
thanks
figured out after hours. issue not of looking it.
i had nginx running on local machine, conf of pointing project of mine , public directory set project, path /assets/application.js being served nginx directly public/assets/ directory of other project. , since other project on heroku used precompile assets locallay compiled application js created inside app/assets being served.
thanks lot guys, comments , discussion helped me figure out issue local machine , bad going on configuration.
thanks again
Comments
Post a Comment