1

我正在使用jquery gem的rails。Rails资产管道和Jquery插件问题

我在我的application.js以下

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

难道这些声明包括以文件?

我使用一个jQuery pluging textareaexpander(http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/)

我得到一个js几乎插件的最后一行错误

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

这是类似下面

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

我不明白这一点?是因为jQuery尚未加载。为什么TextAreaExpander仍然没有定义?

以下是插件文件中的其余代码。

(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(); 
}); 

正如你所看到的功能TextAreaExpander首次通过扩展jQuery的定义,然后叫上文件准备好,但仍然没有工作。我有类似的问题,其他插件上的是choose.js。

如果任何人可以指出问题并详细说明是什么导致了这一点,因为对我来说这没有任何意义(但显然我在这里忽略了一点)。

相关代码

development.rb 

config.assets.compress = false 
config.assets.debug = true 

application.rb 
config.assets.enabled = true 
config.assets.version = '1.0 

行,所以我做的实验表明,以检查它是否是一个语法问题,结果发现事实并非如此。

我做了另一个实验中,如果我从application.js中删除行

//= require_tree . 

,而是与

//= require_self 

在我看来,文件替换它(所呈现视图)我在底部添加以下内容

= javascript_include_tag 'libs/jquery.textarea-exapander' 

一切似乎都很完美。现在有什么想法?

更多信息

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 

我的应用程序。JS从我的布局

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

代码

%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 

上述设置不起作用

下面的设置工作

我的application.js

//= require jquery 
//= require jquery_ujs 

在我的注册/ new.html.haml

some bla bla bla bla haml code 

= javascript_include_tag 'libs/jquery.textarea-exapander' 

这个作品中,同样适用于其他插件chosen.js真的,如果我它的工作原理否则给出.chosen同样的错误观点之后包括不是一个函数。

所以从它看起来像一些评论是错误的与本地安装

我注意到在Heroku在html另一个奇怪的事情和地方

这是在Heroku体类

linux js gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0 

但在我的本地体内类是

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 

我也看到这个我的每一个Rails应用程序在本地

<div id="cboxOverlay" style="display: none;"></div> 
<div id="colorbox" class="" style="padding-bottom: 0px; padding-right: 0px; display: none;"></div> 

身体开始后

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

的身体,我不使用也不包括迄今为止彩盒结束 前...

到底是怎么回事 ??

谢谢

+0

你在哪里放置插件的文件?它在app/assets/javascripts中吗?另外发布你的application.rb,这样我们可以看看你的资产管道是如何设置的,还发布了environments/development.rb(如果合适的话),任何有config.asset *的东西。 – RadBrad

+0

我已经更新了相关代码的帖子。是的,我的插件文件在app/assets/javascripts里面,它们正在页面 – Abid

+0

上加载,正是浏览器对js错误所说的话?不是功能?该插件开发时使用的是什么版本的jQuery,博客文章是2009年,但我不认识选择器语法,是否可以将其更改为JQuery('。expand')。 ,只是为了看看它是否是一个选择器语法问题。假设页面上class =“expand”的唯一元素元素是text_areas。 – RadBrad

回答

0

几小时后发现它。问题不在于我们所有人都在寻找它。

我的nginx运行在我的本地机器上,其conf指向我的另一个项目,公共目录被设置为该项目,所以/assets/application.js路径直接由nginx提供另一个项目的公共/资产/目录。由于另一个项目在heroku上,我用来预编译资产locallay,因此编译的应用程序是js被创建在正在被服务的app/assets中。

非常感谢您的帮助,您的意见和讨论帮助我发现问题出在本地机器上,而且配置出现问题。

再次感谢