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中。

非常感謝您的幫助,您的意見和討論幫助我發現問題出在本地機器上,而且配置出現問題。

再次感謝