私は次のようにjQueryを初期化したウィジェットを作成しています:
# widget.js
(function() {
var jQuery;
var root_url = "<%= root_url%>";
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.9.1') {
var jquery_script = document.createElement('script');
jquery_script.type = "text/javascript";
jquery_script.asyc = true;
jquery_script.src = "http://code.jquery.com/jquery-1.9.1.js";
if (jquery_script.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else { // Other browsers
jquery_script.onload = scriptLoadHandler;
}
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(jquery_script, node);
} else {
jQuery = window.jQuery;
main();
}
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
function main() {
jQuery(document).ready(function($) {
// jQuery works great here!
// But not so much in rendered partials or in server-side JS actions
}
}
})();
サーバーに ajax リクエストを送信し、JS アクションで応答すると、action.js.erb
ファイルで jQuery を使用できません。エラーを吐き出します$ is not a function
。
同様に、jQuery スクリプトを含むパーシャルをレンダリングしても、同じ結果が得られます。
jQuery のグローバル インスタンスを設定していないと思います。その場合、その方法がわかりません。おそらく、私はするべきではありませんか?
どうすればこの問題を回避できますか?