Question

I’m using Chris Richards’ Star Rating jQuery Plugin from Github alongwith the jQuery Template plugin. When the data is inline, the rating control works fine. See sample & source.

However, when the rating control is used with dynamically generated data, the star image doesn’t get applied through the CSS to the dropdown control that internally handles the rating. See sample (click on buttons there) & source.

The alert that I have set to the rating control works though. What can be done to make the stars show up instead of the dropdown?

Answer 1

You will need to call $(".rating").rating(); after the dynamic content load is complete.

Modify your getJSON code:

$("#flickr").live("click", function() {
  var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";
  // Grab some flickr images of cats
  $.getJSON(url, function (data) {
    // Format the data using the catTemplate
    $("#result").empty().append("");
    $("#catTemplate").tmpl(data.items).appendTo("#result");
    // set up rating plugin
    $(".rating").rating();
  });
});