jQuery Star Rating plugin addClass does not work

Question

I am using JQuery with the Star Rating Plugin from the following site http://www.fyneworks.com/jquery/star-rating/# . If I use the rating system in Asp markup there is no problem. However, if I dynamically create the rating system and follow the same steps it only shows up as radio buttons instead of stars.

Here is the markup that works as expected:

 <input name="star4" id="Radio1" type="radio" class="star" />

Here is the relevant jquery script that does not work and only shows the unconverted radio elements:

      function loadMovies(firstMovie, lastMovie) {

          for (incMovie = firstMovie; incMovie <= lastMovie; incMovie++) {
              $('<input>', {
                  type: "radio",
                  id: 'star1-' + incMovie,
                  name: "star",
               }).appendTo($('#sngMovie' + incMovie));

              $('#star1-' + incMovie).addClass('star');
          }
      }

The radio buttons is supposed to be transformed into the star rating system when it has the "star" class. But it does not work when the class is added in JQuery. The radio buttons were not converted even when I tried the following:

Markup

<input name="star4" id="Radio1" type="radio" />

Script

$('#Radio1').addClass("star");

I need to be able to create the rating system dynamically. So I need some help on getting the radio buttons to be transformed to the rating system using jquery addClass or something similar.

aaberg aaberg · Accepted Answer · 2012-04-27T15:13:05

Try this:

$('#Radio1').addClass("star");
$('input[type=radio].star').rating();

or event better:

$('#Radio1').addClass("star").rating();

Edit: Some more explanation The star rating plugin is a normal jQuery plugin (Check out how to build plugins here). Normally, to invoke a plugin on an element, you will have to do something like this:

$('#myElement').myPlugin();

In the case of the Star plugin, the following code is found in the bottom of the plugin code:

$(function(){
    $('input[type=radio].star').rating();
});

This snippet will run the rating() plugin on all radiobuttons with the 'star' class, and it will be done on the jQuery.ready event (wrapping something in an jQuery method, is the same as adding it to the ready event).

When you add the star class to an element, after the codesnippet above have been executed, you have to call the rating() plugin yourself.

Hope this explanation helps you :)

jQuery Star Rating plugin addClass does not work

1 Answers