Question

I’m trying to transfer Rails-generated json into Google Maps markers on a map, but first I’m just trying to display that json, because I’m new to jQuery/JavaScript and trying to understand it.

However, I’ve been stuck with a Chrome developer console error message I do not understand:

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'

I tried using code from various tutorials / examples but got none of them working. My code looks currently like this:

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

So this is taken from an example, and the idea was just to show what the json request returns. There must be some fundamental error in my thinking / code, because I just can’t get it working.

So my question is: how should I read that error and then how to make this code fetch the json from spots.json and show it in the #json-div in my html?

Thank you!

** APPENDIX **

Here’s the whole spots.js file:

$(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);
    }
});
});

The spots.json looks like this:

[{"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

Looking at the definition of $ in your code, it seems like you’re using the Prototype framework as well. A problem when using multiple libraries is that they are overwriting variables, mainly the $.

In your case, use jQuery instead of $ (so jQuery.ajax(...)), or use jQuery.noConflict to restore the $ back to the jQuery one.