Search code examples
javascriptjquerybootstrap-modalrateyo

How to reset the rateYo plugin for star rating?


I am using rateYo plugin for star rating in my project. After submitting my boostrap modal which has star rating plugin used, I want to reset my form values as well as stars to be reset. Basically I want to reset the star rating plugin whenever user closes the modal Below is my code JS code for initializing the rateYo plugin and resetting the form values after modal dismiss.

        $(function () {

var rateYo = $("#rateYo").rateYo({
    fullStar: true,
    onSet: function (rating, rateYoInstance) {
       rating = Math.ceil(rating);
       $('#rating_input').val(rating);//setting up rating value to hidden field
    }
  });
});

    $('#saveFeedbackBtn').click(function(e){
    e.preventDefault();

var name = $("#name_txt_modal").val();
var rating = $("#rating_input").val();
var topic = $("#topic_sel_modal").val();
var comments = $("#comment_txt_modal").val();
if(name == "") {
  $('#feedbackmodalerrortext').html("Please enter your Name");
    e.preventDefault();
    return false;
  } else if(rating == "") {
      $('#feedbackmodalerrortext').html("Please select a rating");
    e.preventDefault();
    return false;
  }  else if(topic == "select") {
      $('#feedbackmodalerrortext').html("Please select a topic");
        e.preventDefault();
        return false;
      }
  else if(comments == "") {
      $('#feedbackmodalerrortext').html("Please enter comments");
      e.preventDefault();
      return false;
      }
       $('#messageFB').append('');
       $('#feedbackmodalerrortext').html("");
  $.ajax({
        url : "feedbackData.htm?name="+name+"&ratingId="+rating+"&topicId="+topic+"&comment="+comments,
        type: "POST",
        async : false,
        data : "html",
        beforeSend:function(){
            $('#messageFB').html('');
        },
        success: function(response) {
            console.debug(response);
            if (response == "success") {
                $('#messageFB').html('Feedback Saved successfully!');
                $('#messageFB').show();

                setTimeout(function () {
                    $('#messageFB').fadeOut(function(){
                        $('#messageFB').hide();
                    });
                }, 1000);

            } else {
                $('#messageFB').html('Error Saving Feedback data!');
                $('#messageFB').show();

                setTimeout(function () {
                    $('#messageFB').fadeOut(function(){
                        $('#messageFB').hide();
                    });
                }, 1000);
            }

        }     

  });
 });


   $('#myfeedbackModal').on('hidden.bs.modal', function (e) {
   $rateYo.rateYo("option", "rating", 0);  /resetting star rating plugin
  $(this)
    .find("input,textarea,select,span")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end()
   .find("#rateYo").val('')
  .end()
  .find("feedbackmodalerrortext").val('')
  .end();

    })

Solution

  • You can use $("#rateYo").rateYo("option", "rating", "0");

    You can find detail option on official link here