jQuery, get datas in AJAX (done) then, display them as star (error)

Question

Hello,

I'm using a star rating, 100% working except when i insert values with javascript :

EXAMPLE : http://www.gamer-certified.fr/test.html

    <script type="text/javascript">
jQuery(document).ready(function() { 

jQuery.ajax({
      type: "get",
      dataType: "jsonp",
      url: "http://www.gamer-certified.fr/export/widget.php",
      data: {demandeur: "esl" },
      cache: true, 
      success: function(data, textStatus, XMLHttpRequest){

        var obj = null, length = data.length;
        for (var i = 0; i < length; i++) {

            widget = "<span class='stars'>"+(data[i].qualite / 2)+"</span>" // automatic not working
            widget = "<span class='stars'>4</span>" // manually not working
            jQuery('#gamer-certified'+i).html(widget);
            }    
    } 
});
});
</script>

The only thing is working is putting directly the data in the span value OUTSIDE the widget +=

<span class="stars">4</span> // is working when directly put on the HTML side

EXAMPLE : http://www.gamer-certified.fr/test.html

Thanks !

Answer 1

To find out why manually entered data works and the data which you receive does not, you need to figure out what is different between the manual data and the entered data. Is it the timing of a jQuery event? Is it the formatting of the data? Once you find this difference, make sure that you address it using the correct means.

EDIT: based on a review of the code, the $.stars() call happens on $(document).ready(), while the content is retrieved after that. Call `$.stars() in the callback, not before.

Answer 2

I don't know if this will sove your problem, but there's a + missing before 0:

widget = "<span class='stars'>"+0+(data[i].qualite / 2)+"</span>"