我正在使用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>
的身體,我不使用也不包括迄今爲止彩盒結束 前...
到底是怎麼回事 ??
謝謝
你在哪裏放置插件的文件?它在app/assets/javascripts中嗎?另外發布你的application.rb,這樣我們可以看看你的資產管道是如何設置的,還發布了environments/development.rb(如果合適的話),任何有config.asset *的東西。 – RadBrad
我已經更新了相關代碼的帖子。是的,我的插件文件在app/assets/javascripts裏面,它們正在頁面 – Abid
上加載,正是瀏覽器對js錯誤所說的話?不是功能?該插件開發時使用的是什麼版本的jQuery,博客文章是2009年,但我不認識選擇器語法,是否可以將其更改爲JQuery('。expand')。 ,只是爲了看看它是否是一個選擇器語法問題。假設頁面上class =「expand」的唯一元素元素是text_areas。 – RadBrad