jQuery, get datas in AJAX (done) then, display them as star (error)
- by Tristan
Hello,
In my website, there are 2 steps :
I get values from another domain with AJAX, it's numbers 100% working
Then, i want to display those numbers in stars with this plugin (http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css)
The error : the stars plugin does not work for the value i recieve from my ajax request, but it's working for my values for my domain which are not JS manipulated
you can see a demo here http://www.esl.eu/fr/test/test_atome/?killcache=true
PS: the data in ajax are provided in JSON-P so i wrote a parser which look like this:
jQuery.ajax({
type: "get",
dataType: "jsonp",
url: "http://www.foo.com/",
data: {demandeur: "monkey" },
cache: true,
success: function(data, textStatus, XMLHttpRequest){
var obj = null, length = data.length;
for (var i = 0; i < length; i++) {
widget = "<p>AVERAGES<p>";
widget += "<p><span class='stars'>";
widget += data[i].services;
widget += "</span></p>";
widget += "<p><span class='stars'>";
widget += data[i].qualite;
widget += "</span></p>";
jQuery('#gotserv').html(widget);
}
}
});
});
Then i have the star plugin after this function :
$.fn.stars = function() {
$(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range
val = val 5 ? 5 : (val < 0 ? 0 : val);
// Calculate physical size
var size = 16 * val;
// Create stars holder
var stars = $('');
// Adjust yellow stars' width
stars.find('span').width(size);
// Replace the numerical value with stars
$(this).replaceWith(stars);
});
I hope you understand, i don't know if i'm clear
Thank you
