Ajax Rating Example

Read The Full Tutorial.

The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have.

1- Simple form binding: 

<script type="text/javascript">
  var s1 = new Stars({
    maxRating: 5,
    bindField: 'myRating',
    imagePath: 'images/',
    value: 4.5
  });
</script>

2- JavaScript callback function: 

<script type="text/javascript">
  function rating(val)
  {
    alert('You rated it ' + val + ' star(s)!');
  }
  var s2 = new Stars({
    maxRating: 5,
    imagePath: 'images/',
    callback: rating
  });
</script>

3- Sending values through AJAX:

<script type="text/javascript">
  function ajaxRating(xml)
  {
    var x = xml.responseXML;
    var xmlRating = x.getElementsByTagName('rating');
    var rating = xmlRating[0].firstChild.nodeValue;
    alert('You rated it ' + rating + ' star(s)!');
  }
  var s3 = new Stars({
    maxRating: 5,
    actionURL: 'rate.php?rating=',
    callback: ajaxRating,
    imagePath: 'images/',
    value: 3
  });
</script>

4- Locking Example 1: Lock on update:  

<script type="text/javascript">
  function rating(val)
  {
    alert('You rated it ' + val + ' star(s)!');
    s4.locked = true;
  }
  var s4 = new Stars({
    maxRating: 5,
    imagePath: 'images/',
    callback: rating
  });
</script>

5- Locking Example 2: Prelocked:  

<script type="text/javascript">
   var s5 = new Stars({
    maxRating: 5,
    value: 4,
    imagePath: 'images/',
    locked: true
  });
</script>

6- External Value Setting with a disabled callback:

function setStarValue(val) {
 window.s7.setValue(val, false);
}
function uncalledCallBack(val)
{
 alert('was called anyway');
}
var s7 = new Stars({
 maxRating: 5,
 callback: uncalledCallBack
});