Question

I am using rails with jquery gem.

I have the following in my application.js

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

Do these declarations include files in order ?

I am using a jquery pluging textareaexpander (http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/)

I am getting a js error

jQuery("textarea[class*=expand]").TextAreaExpander();

on almost the last line of the plugin which is something like below

// initialize all expanding textareas
jQuery(document).ready(function() {
  jQuery("textarea[class*=expand]").TextAreaExpander();
})

I don’t get it ? is it because jQuery hasn’t been loaded. why is TextAreaExpander still not defined ?

For reference below is the rest of the code in the plugin file.

(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and 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() {
// is a 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);
// zero vertical padding and 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 all expanding textareas
jQuery(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander();
}); 

As you can see the function TextAreaExpander was first defined by extending jQuery and then called on document ready but still not working. I have similar issues with other plugins on of them is chosen.js.

If any one can point out the issue and elaborate what is causing this, because for me this doesn’t make any sense ( but obviously i am missing a 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 so I did the experiment suggested to check if it is a syntax issue, turns out it isn’t.

I did another experiment, If I remove the line

//= require_tree .

from application.js and instead replace it with

//= require_self

and in my view file (the view that is being rendered) I add the following at the end

= javascript_include_tag 'libs/jquery.textarea-exapander'

all seems to work perfectly. Any ideas now ?

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 from my 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 does not work

The following setup works

my application.js

//= require jquery
//= require jquery_ujs

inside my registrations/new.html.haml

some bla bla bla bla haml code

= javascript_include_tag 'libs/jquery.textarea-exapander'

this works, the same is true for the other plugin chosen.js if I include in after the view it works otherwise it gives the same error that .chosen is not a function.

So as from the comments it looks like something is wrong with my local setup

I have noticed another strange thing in the html on heroku and local

this is the body class on heroku

linux js gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0

but on my local the body class is

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 am also seeing this my 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 and

<div id="supersized-loader"></div>
<div id="supersized"></div>

before body ends
I am not using neither including color box by far…

What is going on ??

Thanks

Answer 1

Figured it out after hours. The issue was not where all of us were looking for it.

I had nginx running on my local machine, the conf of which was pointing to another project of mine and the public directory was set to that project, so the path /assets/application.js was being served by nginx directly from the public/assets/ directory of the other project. and since the other project was on heroku I used to precompile assets locallay so a compiled application was js was created inside app/assets which was being served.

Thanks a lot for your help guys, Your comments and discussion helped me figure out that the issue was with local machine only and that something bad was going on with my configuration.

Thanks again