CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Diego
Diego

Reputation: 2372

MVC rating Bootstrap Jquery unselect stars selected

I am doing an MVC Application with Rating Bootstrap.

<input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false" min=0 max=5 step=1 data-glyphicon="false" data-size="sm">

I have also define this...in order to know how many start has been clicked.

 $(document).ready(function () {
        $("#input-21b").on("rating.change", function (event, value, caption) {
            $('#hdfRatingValue').val(value);

    });

I have a hidden input to keep the starts selected.

It Works fine...

When User clicks "OK" buttom, a Ajax function is called to save the rating.

What I need is to UnSelect the starts selected via Jquery....

I have try 

  $('#input-21b').rating({
            'update': 0,
            'showCaption': false,
            'showClear': false
        });

Ais it says is Bootstrap-star-rating set default stars

But Nothing happend. I also Include 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--  required libraries  -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>

Still nothing happend.

Is that Posible?

Thanks

Upvotes: 1

Views: 1062

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

I tried But Nothing happend:

$('#input-21b').rating({
    'update': 0,
    'showCaption': false,
    'showClear': false
});

update is a method and you cannot use it at initialization. Moreover, you don't need initialization because you specified all attributes in the HTML.

If you want to use that method you must write:

$('#input-21b').rating('update', 0).trigger('rating.change');

But you can also directly reset the rating to its initial value:

$('#input-21b').rating('reset').trigger('rating.change');

Why do you need to trigger the event rating.change? Because in this way you can execute your related event handler (i.e.: copy the value to your hidden field).

$(document).ready(function () {
  $("#input-21b").on("rating.change", function (event, value, caption) {
      $('#hdfRatingValue').val(value);
  });
  $('button').on('click', function(e) {
      //$('#input-21b').rating('update', 0).trigger('rating.change');
      $('#input-21b').rating('reset').trigger('rating.change');
  })
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--  required libraries  -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>

<div class="container">
    <form>
        <div class="form-group">
            <label for="input-21b">Rating:</label>
            <input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false"
                   min=0 max=5 step=1 data-glyphicon="false" data-size="sm">
        </div>
        <div class="form-group">
            <label for="input-21b">Rating Value:</label>
            <input id="hdfRatingValue" type="text">
        </div>
        <button type="button" class="btn btn-primary">Reset rating</button>
    </form>
</div>

Upvotes: 1

Related Questions