1

jquery gemでレールを使用しています。

私のapplication.jsには次のものがあります

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

これらの宣言にはファイルが順番に含まれていますか?

jquery プラグイン 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

わかりましたので、構文の問題であるかどうかを確認するために提案された実験を行いましたが、そうではないことがわかりました。

私は別の実験をしました. 行を削除すると

//= require_tree .

application.js から取得し、代わりに次のように置き換えます

//= 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

私のapplication.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

私の registrations/new.html.haml 内

some bla bla bla bla haml code

= javascript_include_tag 'libs/jquery.textarea-exapander'

ビューの後に含めると、他のプラグインのchoose.jsにも同じことが当てはまります。それ以外の場合は、.chosenが関数ではないという同じエラーが発生します。

コメントから、私のローカル設定に何か問題があるようです

heroku と local の 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

また、これは私のすべてのレールアプリをローカルで見ています

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

ボディが終了する前に、カラーボックスを含めてどちらも使用していません...

何が起こっている ？？

ありがとう

4

1 に答える 1

0

数時間後にそれを理解しました。問題は、私たち全員が探していた場所ではありませんでした。

ローカル マシンで nginx を実行していて、その conf が私の別のプロジェクトを指していて、パブリック ディレクトリがそのプロジェクトに設定されていたため、パス /assets/application.js は nginx によって public/assets から直接提供されていました。 / 他のプロジェクトのディレクトリ。他のプロジェクトはheroku上にあったため、アセットlocallayをプリコンパイルしていたため、コンパイルされたアプリケーションは、提供されているapp / assets内に作成されたjsでした。

皆さんの助けに感謝します。あなたのコメントと議論のおかげで、問題はローカル マシンのみにあり、私の構成で何か悪いことが起こっていることがわかりました。

再度、感謝します

于 2012-06-04T21:52:05.850 に答える