prototype.jsで$ is not definedエラーが発生！
- JSバージョン1.6のprototype.jsを使用して、指定idのエレメントを取得しようとした際に、$ is not definedエラーが発生してしまいます。
- ブラウザはFirefox2.0とIE7.0を使用し、OSはWinXPproです。実行したコードはシンプルなHTML文書で、prototype.jsを読み込んでいます。
- レンタルサーバにアップロードして実行すると正常に動作しますが、ローカルPCで実行するとエラーとなってしまいます。解決策を教えてください！
- ベストアンサー
prototype.js で $ is not defined になってしまう！
JSバージョン：prototype1.6 ブラウザ：Firefox2.0、IE7.0 OS：WinXPpro でシンプルに <html> <head> <title>$ - 指定idのエレメントを取得</title> </head> <script type="text/javascript" src="/js/prototype.js?aaads"></script> <script type="text/javascript"> function test1() { var element = $('div1'); alert(element.innerHTML); } </script> <body> <div id="div1">DIV1の中身</div> </body> </html> を実行したところ、$ is not defined と エラーになってしまいます。 あるレンタルサーバにUPして動かすと問題なく、 ローカルPCで実行するとエラーになってしまうようです。 どなたか教えて下さい！！！
- saburo123
- お礼率100% (24/24)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> ローカルPCで実行するとエラーになってしまうようです。 スクリプトのリンクが、/js/prototype.jsとなっています。これは相対パスではなく、ルートフォルダからの絶対パス（たとえばサーバがhogehoge.comなら、http://hogehoge.com/js/prototype.js）と言う事なので、そこにprototype.jsがなければ駄目な訳です。 相対パスに変更すれば良いです。 たとえば、 hoge/hoge.html js/prototype.js ならば、hoge.htmlから見たprototype.jsは../js/prototype.jsになります。
関連するQ&A
- Prototypeを使っていて困ったことがあります。
Prototypeを使っていて困ったことがあります。 以下のようなソースでprototypeでtest.htmlを読み込みました。 そしたら困った事が2点出てきました。 (1)test.html内のjavascriptが動かない test.html内で使用しているprototypeやjquery等が全く動きません。 何か解決策はあるのでしょうか？ (2)test.htmlからtest1.htmlのdiv idに対して更新が行えない 読み込んだ先でも読み込み元のdiv idにファイルで更新が出来ると思い込んでおり これが出来ない為、かなり致命的な事になってしまいました。。 何とかできないでしょうか？ [test1.html] <html> <head> <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript"> function test() { new Ajax.Updater('title','test.html',{method: 'get'}); } </script> </head> <body> <div id="title"> ここにファイルを読み込む。 </div> <input type="button" value="操作" onclick="test()"/> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- prototype.jp 動作しない
prototype.jsをダウンロードしてきて、 index.phpと同じディレクトリに置いています。 初めてなのでバージョン情報を表示させようと思っています。 下記設定で実行しても最初のアラートaaaaaまでしか表示されません。 $("xxxx").innerHTML = Prototype.Version;の部分をコメントアウトするとbbbbbまで表示されます。 環境----------------------------- CentOS５ PHP5 prototype.js 1.6 index.php----------------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function n(){ alert("aaaaa"); $("xxxx").innerHTML = Prototype.Version; alert("bbbbb"); } // --></script> </head> <body> <input type="button" value="Click" onClick="n()"> <div id="xxxx"></div> </body> </html> ------------------------------------------ 今日始めたばかりなので、なにがなんだかさっぱりわかりません。 よろしくお願いします。
- 締切済み
- JavaScript
- ｊｓ プロトタイプ
javascriptソースコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html
- ベストアンサー
- JavaScript
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- htmlファイルのインクルード
htmlファイルのインクルード あるページを複数の別のhtmlファイルを読み込んで構成しようと思っています。 以下がソースなのですがFirefoxでは samplesample テストテスト と表示されるのですが、Internet Explorerでは テストテスト のみが表示されsample.htmlが読み込まれません。 何がいけないのでしょうか。 よろしくお願いします。 [index.html] <html> <head> <title>テストページ</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function my_include(id, file) { document.open(); document.write('<div id="' + id + '"></div>'); document.close(); var options = {}; options.method = "get"; options.asynchronous = true; new Ajax.Updater(id, file, options); } </script> </head> <body> <div id="headers"></div> <script type="text/javascript">my_include("headers","sample.html");</script> テストテスト </body> </html> [sample.html] <head> <title>sampleページ</title> </head> <body> samplesample </body> </html> [バージョン情報] Firefox 3.6.3 Internet Explorer 8 prototype.js 1.6.1
- ベストアンサー
- HTML
- scrollsmoothly.jsが動かない
質問させていただきます。 下記のscrollsmoothly.jsを設定したいのですが、どうしても うまく動作しません。 http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly ソースコードをDLして jsフォルダに入れました。 そして <head>～</head> の間に <script type="text/javascript" src="js/scrollsmoothly.js"></script> と記述しました。 そして <body> <div id="head"> ～ <a href="#head">topへ戻る</a> </body> と記述しました。 何か間違っていますでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- prototype.jsを利用したイベントの登録について
はじめまして。 現在 prototype.js 1.4.0 を利用して、Web ページの作成を行っているのですが、イベントの登録 (Event.observe)でやりたいことと、異なる動作になってしまい困っているところです。 [ やりたいこと ] javascript側で動的に生成した各要素 (div) に対して moueover & mouseout のイベントを割り当てる。mouseover 時には background の値を変え mouseout 時には background の値を元(transparent)に戻す。 [ 困っていること ] 各要素のmouseover & mouseout 時には各要素の背景色が変更されるはずなのに、一番最後に生成した要素の背景が変更されてしまう。 [ コード ] <html> <head> <script type="text/javascript" src="prototype.js" ></script> <script type="text/javascript"> view = new Class.create(); view.prototype = { initialize:function() { var view = $('viewContents'); var idName = 'test'; for (var i=0; i<10; i++) { var id = idName + i; var d = document.createElement('div'); d.id = id; d.innerHTML = id; view.appendChild(d); Event.observe(d,'mouseover',function() {d.style.background='#aaa';}.bind(this),false); Event.observe(d,'mouseout' ,function() {d.style.background='transparent';}.bind(this),false); Event.observe(d,'click' ,function() {alert(d.id);}.bind(this),false); } } } </script> </head> <body> <p><input type="button" onclick="new view();" value="取得"></p> <div id="viewContents"></div> </body> </html> となります。 なにか基本的なところが間違っているのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み
教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html 特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
お礼
動きました！ありがとうございます！ Pathの指定間違いとは…全然気づきませんでした… 本当に助かりました、ありがとうございます。