CODEWITHSUNDEEP
javascriptjquery
Ovidiu G
Ovidiu G

Reputation: 1273

Star rating plugin issue

I'm using this plugin to make a simple star rating system -> http://antenna.io/demo/jquery-bar-rating/examples/

Works pretty good up to a point where I get stuck.. I followed the documentation and I made a div with some select items.

$('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        console.log(val);
      }
    }
  });
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>
<select id="skills">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
    </select>

<select id="communication">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
    </select>

<select id="quality">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
    </select>

And I'm using the script like so: 

  $('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        console.log(val);
      }
    }
  });

As you can see on the OnSelect function I'm able to get the star rating value that the user selected. The problem is, I want to store this value in a variable outside of the onSelect function and outside of the barrating function.

I want this because I have multiple star ratings and I need to make an average of those ratings. Any suggestions?

Upvotes: 0

Views: 1272

Answers (4)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48743

You can either create a map; globally to store the ratings or you can create a jQuery plugin to scrape the values from the widgets.

var formState = {};

(function($) {
  $.fn.starRating = function() {
    return this.next().find('.br-current').data('rating-text');
  };
  $.fn.starRatings = function() {
    var map = {};
    this.each(function(index, widget) {
      map[$(widget).attr('name')] = $(widget).starRating();
    });
    return map;
  };
})(jQuery);

$('.star-rating').barrating({
  theme : 'fontawesome-stars',
  initialRating : null,
  onSelect : function(value, text, event) {
    var $starWidget = $(event.target),
        $select = $starWidget.parent().prev(),
        val = $starWidget.data('rating-value');

    // Global form state
    formState[$select.attr('name')] = val;
    console.log(JSON.stringify(formState));
    
    // jQuery plugin to get all the ratings.
    console.log(JSON.stringify($('.star-rating').starRatings()));
    
    // Get individual rating.
    console.log($('select[name="skills"]').starRating());
  }
});
.as-console-wrapper { max-height: 4em !important; }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/fontawesome-stars.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/css-stars.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>

<form>
  <label>Skills</label>
  <select name="skills" class="star-rating">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <label>Communication</label>
  <select name="communication" class="star-rating">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <label>Quality</label>
  <select name="quality" class="star-rating">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</form>

Upvotes: 1

Ovidiu G
Ovidiu G

Reputation: 1273

For anyone wondering, I was able to fix this by adding a hidden input. Basically, when the OnSelect function happens I set the value of that hidden input to 'val'. This way I will always have the correct value.

<select id="skills">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input type="hidden" class="skills-rating" name="skills-rating" value="">


  $('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        $(".skills-rating").val(val);
      }
    }
  });

Upvotes: 2

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 20007

You can declare a variable outside the scope of barrating() and use $.extend() to merge new data into the original state.

var state = {};

$('#skills').barrating({
  theme: 'fontawesome-stars',
  initialRating: null,
  onSelect: function(value, text, event) {
    if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      var val = $(event.target).data("rating-value");
      $.extend(state, {skills: val});
      console.log(state);
    }
  }
});

$('#communication').barrating({
  theme: 'fontawesome-stars',
  initialRating: null,
  onSelect: function(value, text, event) {
    if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      var val = $(event.target).data("rating-value");
      $.extend(state, {communication: val});
      console.log(state);
    }
  }
});

Upvotes: 1

Singh
Singh

Reputation: 554

Just take an array to store the all ratings. Push new value each time OnSelect is performed.

 var ratings = [];

 $('#skills').barrating({
   theme: 'fontawesome-stars',
   initialRating: null,
   onSelect: function(value, text, event) {
     if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      val = $(event.target).data("rating-value");
      console.log(val);
      ratings.push(val); 
    }
  }
});

Upvotes: 0

Related Questions