"SET" won't set a .5 value

[tom-daly]

I'm calling the 'set' after selecting a star (1-5) ... I'm logging what the value should be and I see 3.5 but the stars are only set to 3. I am using the fontawesome-stars-o.

$("#resource-" + resourceId).find("select").barrating("set", averageRating);

When the code loads the initial value is set to 3.5 however I'm seeing that it won't update to a half value.

[tom-daly]

I modified to code to work but it's a mess right now cause i'm tired and it's late. but I managed to make it show half values.

basically it's not finding a 3.5 in the original select and it's just returning > line 446. I've modified that function to use the floored value and then call applyStyles with an parameter to use instead of initialRating. Then calculate the fraction based on that value.

i'm going to attempt to pull the code and submit a pull request

[lukasjuhas]

@tom-daly Hey, I had similar problem but I found a trick how to do this.

The code is roughly like this - I haven't had chance to tidy this up but you'll get the logic. I added some comments.

html:

<select class="rating" name="rating" autocomplete="off">
    <option value="1">1</option>
    <option value="1.5">1.5</option>
    <option value="2">2</option>
    <option value="2.5">2.5</option>
    <option value="3">3</option>
    <option value="3.5">3.5</option>
    <option value="4">4</option>
    <option value="4.5">4.5</option>
    <option value="5">5</option>
    <option value="5.5">5.5</option>
</select>

in sass we hide all the .5 ones so we just see 5 stars

.br-theme-fontawesome-stars-o .br-widget a {
  &:nth-child(2n+2) {
    display: none !important;
  }
}

and the js:

$('.rating').barrating({
  theme: 'fontawesome-stars-o',
  showSelectedRating: false,
  initialRating: 5,
  hoverState: false
});

// on star click
$('.br-theme-fontawesome-stars-o .br-widget a').on('click', function(event, target) {
  // check the value of clicked star
  let $selected = $(this).data('rating-value');
  
  // if clicked on the right half of the star
  if (event.clientX > $(this).offset().left + 9) {
     $selected = $selected;
  } else {
    // if clicked on the left side  of the star (we want half star)
    $selected = $selected - 0.5;
   }

 // make sure we selected new start we clicked (or half star)
 $('.rating').barrating('set', $selected);
   // now if the value is decimal value, we know it's half star.
   if($selected % 1 != 0) {
     console.log($selected);
     // add appropriate classes
     $(`a[data-rating-value="${$selected + 0.5}"]`).addClass('br-fractional br-fractional-50');
  }
});

I hope that makes sense.. if you have any questions let me know!

Lukas