jQuery ajaxキャッチしたタイプのエラー

Question

私はRailsで生成されたjsonをマップ上のGoogle Mapsマーカーに転送しようとしていますが、まずjson/JavaScriptを初めて使用しているため、そのjsonを表示しようとしていますそれを理解します。

しかし、私は理解していないクロムデベロッパーコンソールのエラーメッセージが表示されて立ち往生してきた：

Uncaught TypeError: Object function $(element) { 
if (arguments.length > 1) { 
    for (var i = 0, elements = [], length = arguments.length; i < length; i++) 
    elements.push($(arguments[i])); return elements; 
} 
if (Object.isString(element)) element = document.getElementById(element); 
    return Element.extend(element); 
} has no method 'ajax' 

私は、様々なチュートリアル/例からのコードを使用してみましたが、作業それらのどれを持っていません。私のコードは次のように現在になりますので、これは例から取られ

$.ajax({ 
    url: "http://localhost:3000/spots.json", 
    success: function(html){ 
     $("#json").append(html); 
    } 
}); 

、とアイデアはまさにJSON要求リターンを示すことでした。私の思考/コードには根本的な誤りがあるに違いない。なぜなら、私はそれを動作させることができないからです。

私の質問は、どうすればこのエラーを読んで、このコードでspots.jsonからjsonをフェッチし、htmlの＃json-divに表示するのですか？

ありがとうございました！

* *付録**

ここで全体spots.jsファイルです：

$(document).ready(function() { 

var latlng = new google.maps.LatLng(60.17, 24.93); 

var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

$.ajax({ 
    url: "http://localhost:3000/spots.json", 
    success: function(html){ 
     $("#json").append(html); 
    } 
}); 
}); 

spots.jsonは次のようになります。

の定義を見てみると

[{"spot":{"address":"","category":"Ramppi","created_at":"2011-07-13T14:06:44Z","latitude":60.171916,"title":"Kiasman \"Design-ramppi\"","updated_at":"2011-07-13T14:06:44Z","id":1,"area":"Helsinki","description":"","longitude":24.935875}},{"spot":{"address":"","category":"Puuli","created_at":"2011-07-13T14:07:07Z","latitude":60.176526,"title":"Tattipuuli","updated_at":"2011-07-13T14:07:07Z","id":2,"area":"Helsinki","description":"","longitude":24.919395}}] 

Answer 1

は、 $のコードでは、Prototypeフレームワークも使用しているようです。複数のライブラリを使用するときの問題は、それらが上書き変数であることです。主に$です。あなたのケースでは

、jQuery代わりの$（そうjQuery.ajax(...)）を使用する、またはバックjQueryの1に$を復元するjQuery.noConflictを使用しています。