starsRating undefined value in rating

I use the starsRating package to display a 5 star scale in each row of a dynamic table

<p>{{>starsRating mutable=true size='md' class='js-rate-image' id='rating' product=this.ObjectId }</p>

In .js template event I use the below code to get the star rating value

'click .js-rate-image':async function(event,instance) {
  event.preventDefault();
  this.state = new ReactiveDict;
  var rating = $(event.currentTarget).data("userrating");
  console.log('star rating',rating);
 
},

sometimes though the value gets ‘undefined’ although the star seems clicked on the screen so the user does not get which row has not been rated in order to re-rate again and set a value (I have created a check where all the values should be given proper values and not undefined this is why a pop up appears when rate is undefined)
How can I fix this?

Two things I notice, but I have no idea if they are related to your problem

  • you create a new ReactiveDict every time the click event fires, what is that supposed to accomplish?
  • all your rating elements have the same id rating, which is not the right way to use id and modern browsers will complain about it
  • you should be able to just use event.currentTarget.dataset.userrating
2 Likes

thank you for your useful comments

  • ReactiveDict was somehow forgotten, there was of no use I deleted it

  • the id='rating' inside html was also removed since the event is triggered on class and I also see that I am getting the right rating value each time the user selects a star

  • in my case the post below made me use this to get the rate value
    var rating = $(event.currentTarget).data("userrating");
    which also seems that works or I should think whether it is the reason of getting undefined at times…I ll check a bit more…
    I have tried also in past using this
    event.currentTarget.dataset.userrating
    but with no result so I kept the one already mentioned
    Star Rating Save Data

Yes, I can see that now. Frankly I always thought that jQuery.data iwas equivalent to DOMElement.dataset, but it is not. You can access data elements with jQuery.data, but you can’t use DOMElement.dataset to access values set with jQuery.data. Learned something new :slight_smile:

1 Like