Search code examples
javascriptjqueryraty

Reset jQuery Raty selection on click event (jQuery)


I am using the jQuery Raty plugin within a jQuery UI dialog (basically a questionnaire style format).

Using some custom jQuery I have created a questionnaire style interface that on each selection will show a 'new question' in which the user must give a 1-10 rating.

Offical plugin site :- http://wbotelhos.com/raty

$('div.raty').raty({
    click: function(score, evt) {
       var position = parseInt($('.raty').attr('data-question'));
       number = number+1;
       // append scores (visual aid)
       $('div#myscores').append(score);
       $('form#questionnaire').append('<input type="hidden" class="scores" name="scores['+position+']['+score+']" />');

       if (position != 4) {
         $('h4#question-header').text( 'Q'+number+'. '+questions[position+1]);
         $('div.raty').attr('data-question', position+1);
       }

       if (position == 4) {
         $("div#question-content").append( "<h2>Complete</h2>" );
       }
      }
            });

This is the HTML :-

<div id='question-content'>
  <form id='questionnaire'>
  <p>Please complete the online questionnaire</p>
   <div id='myscores'></div>
   <div class='question'><h4 id='question-header'></h4></div>
   <div class='raty' data-question='0'></div>
   <input id='target-text-hint' class='input hint' type='hidden'>
   </form>
 </div>

Using the click() in the raty() - how would I modify this to do the following: On each 'raty' click reset the score to 0 (e.g so no stars are highlighted for the 'next question')


Solution

  • you need something like this

    // add a click listener for your ratys
    $("your-raty").raty({
      click: function(score, evt) {
        // clean next raty on click
        var next = $("selector");
        next.raty('score', 0);
      }
    })