Question

I’m getting an uncaught referenceError whenever the ‘countryDetail’ function calls the ‘country’ variable using the following code:

function load_countries(e) {
var count = e.features.length;      
if (!count) {return;}   
for (var i = 0; i < count; i++) {
    var feature = e.features[i];
    // get the country name & rank
    country = feature.data.properties.NAME
    score = rsfpfi2010[country]

    feature.element.setAttribute("onmouseover", "countryDetail("+country+","+score+");");
        feature.element.setAttribute("onmouseout", "hideCountryDetail();");
    feature.element.onmousemove = detailFollow;
}
}

// Tooltip content & display
function countryDetail(c,s) {
//console.log(c,s);
if (score == undefined) {
    $("#tooltip").html("<h3>"+ c +"</h3><br/>Data Unavailable");
} else {
    $("#tooltip").html("<h3>"+ c +"</h3><br/>Score: " + s);
}
$("#tooltip").show();
}

What I don’t understand is that if I replace ‘country’ with ‘score’, like in the following line:

feature.element.setAttribute("onmouseover", "countryDetail("+score+","+score+");");

everything runs fine. (Except I don’t get the data I need, of course).

The ‘score’ variable is called from a json file loaded in the header, whereas the ‘country’ variable is pulled directly from geoJSON data written to the page.

I’m almost positive i’ve missed something dead simple but by now i’m totally bind to it.

thanks in advance!
Nathan

Answer 1

Try it:

$(feature.element).hover(function () {
    countryDetail(country, score);
}, function () {
    hideCountryDetail();
}).move(detailFollow);

instead of

feature.element.setAttribute("onmouseover", "countryDetail("+country+","+score+");");
    feature.element.setAttribute("onmouseout", "hideCountryDetail();");
feature.element.onmousemove = detailFollow;