Hover/Tooltip not working! Help!

[SarahSponda902]

Posting without extraneous code.


I have been having problems with GeoChart for a few days now. The
hover/tooltip property has stopped working! So the "click" even still
works, but there is no feedback to the user as to what country they
are hovering over. I have eliminated the possibility of the error
being with the code I have written (see below) because I tried the
example code from the GeoChart webpage, and that rendered the same
error (see screenshots attached below). I don't know what to do,
please help!

Thanks,
Sarah

Error in Chrome: "Object #<NodeList> has no method 'each'"
http://i46.tinypic.com/20zz41v.png

Error in Safari: "'undefined' is not a function"
http://i46.tinypic.com/r2nw53.png

variables:
- countries: list of all "active" countries (ID format: "AF", etc.)
- names: list of all "active" countries (Name format: "Afghanistan",
etc.)

google.load("visualization", "1", {"packages":
["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new
google.visualization.DataTable();
data.addRows(numbers.length);
data.addColumn("string", "CountryID");
data.addColumn("string", "Country");
data.addColumn("number", "Programs");
data.addColumn({type:'string',
role:'tooltip'});

for (var i=0; i<numbers.length; i++) {
data.setValue(i, 0, countries[i]);
data.setValue(i, 1, names[i]);
data.setValue(i, 2, 200);
data.setValue(i, 3, "Programs: ");
}

var options = {width: 1.4*556, height: 1.4*347, backgroundColor:
"#E3E6D5", datalessRegionColor:"#BCDFC3", colors: ["#FC8767",
"#FC8767"], legend:"none"};

var container = document.getElementById("visualization");

var geochart = new google.visualization.GeoChart(container);

google.visualization.events.addListener(geochart, "regionClick",
function(eventData) {
document.location = "http://volunteervoice.herokuapp.com/
pages/"+eventData.region+"/searches";
});

geochart.draw(data, options);

};

[asgallant]

It works fine when I do it: http://jsfiddle.net/asgallant/dLXde/ 

[SarahSponda902]

Yea it works fine on the playground too :(

I have no idea what's going on 

[asgallant]

Can you post the full code or a link to the page?  If so, I'll take a look and see what I can find.

[SarahSponda902]

Yea it's at volunteervoice.herokuapp.com/programs

Thank you so much,

Sarah

[asgallant]

I tested it out, and it only throws the error occasionally for me.

I'm not sure this has anything to do with the Visualization API.  The error is being thrown on line 12605 of application.js (which looks like it's the source for jQuery, but you load jQuery separately too?):

this.each(function(value, index) { 

where this refers to an HTML NodeList.

There are a number of other errors being thrown, too, that you might want to resolve first to make sure this isn't being caused by one of them.  See the developers console in Chrome (ctrl-shift-j) for the list.

[SarahSponda902]

Thank you so much! I had no idea there were errors being thrown. I'll check this out right away

Side note: I loaded jquery a second time because the jquery wasn't functioning without the second call. I'm sure there's a reason for this, I just don't know what it is..

Thanks again,

Sarah

[SarahSponda902]

IT WORKED!!

It seems that my requiring jquery and jquery_ujs in the application.js file was overkill. Somehow by calling jquery one too many times, the hover-effects stopped functioning.

Thanks again so much for pointing out the errors and chrome's awesome developer tools. This is my first web app, and I'm not fully familiar with all the tools available.

Cheers,

Sarah

On Thursday, May 24, 2012 12:19:31 PM UTC-7, SarahSponda902 wrote:

[asgallant]

It also looks like you are loading Prototype alongside jQuery; I'm not 100% sure of this, but I recall that Prototype uses the global '$' variable, which could be conflicting with jQuery (which definitely uses the $ variable).  You can make jQuery play nice with other libraries that use $ by calling jQuery.noConflict() on page load (this relinquishes jQuery's use of $, reference it with "jQuery" instead).  If you don't intend to use Prototype, then you shouldn't load it.