1

I have successfully implemented the Raty star rating in my ASP.NET Core app but I am having one issue that I can’t seem to resolve.

I am using the lib for a dual purpose (see Sample image of Raty usage):

  1. to show a read-only ‘Total’ rating for an entity (i.e. an Artist in the image above), and
  2. to allow each user to set/edit their own rating for each artist.

The data is stored in the DB and the Artist ‘Total’ rating is retrieved when the main record is retrieved. When the logged in user clicks on the ‘Total’ rating (the 5 stars on top), a bootstrap toast popup displays, retrieves the user specific rating for that artist via AJAX, and displays their last saved rating (if any). Everything works great, including saving their rating in DB if they change it and click the ‘Update’ button.

BUT... what I can’t seem to figure out is how to update the ‘Total’ Artist rating (stars on the top). The second AJAX call (when user clicks the ‘Update’ button) updates the DB and returns the newly computed ‘Artist ‘Total’ rating, but when I try to reset the stars on top to correctly display the new Artist ‘Total’ rating, nothing happens.

The funny thing is: I can use $('.userRating').data('raty').score(RatingUserVal); to reset the original user rating (when the user displays the popup, changes their rating, does NOT click update, and instead clicks the ‘X’ to close the popup). So if they click the ‘Total’ rating again, I simply reset the user rating via $('.userRating').data('raty').score(RatingUserVal); and that works great.

But when I try to do the same for the ‘Total’ rating, it doesn’t work??

Below is some relevent code so maybe someone can point me to what I’m doing wrong. This is on page load for the ‘Total’ Artist rating:

// Display the Artist 5-star "Rating" on page load.
$('.rating').raty({
       hints: ['', '', '', '', ''],
       readOnly: true,
       path: '/lib/raty-master/lib/images',
       score: $('input:hidden[name="RatingTotal"]').val()
});

This is when the user clicks the ‘read-only’ stars (the first time ONLY) and the user rating is retrieved via AJAX and displayed in the popup:

$('.userRating').raty({
       hints: ['', '', '', '', ''],
       path: '/lib/raty-master/lib/images',
       score: $('input:hidden[name="RatingUser"]').val(),
       scoreName: 'RatingUser'
});

And finally, when the user clicks ‘Update’ in the popup, I update the DB via AJAX and get the recalculated variables. BUT when I try to update the ‘Total’ rating (on top), nothing happens. Here is the code for that, including some variables I’m using for my DB updates, etc.:

$('input:hidden[name="RatingTotal"]').val(response.data1);
$('input:hidden[name="RatingCount"]').val(response.data2);
$('input:hidden[name="RatingCountString"]').val(response.data3);
$('input:hidden[name="RatingUser"]').val(SelectedRatingUserVal);
$('.ratingCountDisplay').html('(' + response.data3 + ')');
$('.rating').data('raty').score(response.data1);

// NOTE: I tried using the‘move’ function too (instead of $('.rating').data('raty').score(response.data1);), but no success. 
$('.rating').data('raty').move(response.data1);

Anyway, I’m hoping that all my explanation/code/image will be helpful and someone can quickly point out my error.

Cheers...

MicJarek
  • 53
  • 6
  • can you also show us your html/aspx page part – Aristos Aug 24 '21 at 20:30
  • 1
    If you remove `readOnly: true,` in `$('.rating')`,can it work? – Yiyi You Aug 25 '21 at 07:05
  • Good call @Yiyi You! I removed the readOnly: true and that allowed the score to be set. The problem is that I need the .rating stars to be readOnly, so I simply reset/set the readOnly property around the score and that works fine. See my answer for the code I added. – MicJarek Aug 25 '21 at 19:30

1 Answers1

0

After a great suggestion from @Yiyi You, the solution is to toggle the readOnly attribute when setting the '.rating' score. Apparently, when '.rating' is in readOnly mode, it will NOT let you reset the star display. Hence the solution is:

 $('.rating').data('raty').readOnly(false);
 $('.rating').data('raty').score(response.data1);
 $('.rating').data('raty').readOnly(true);

Simple and elegant. Thanks again for the suggestions and hopefully this will help others.

Cheers...

MicJarek
  • 53
  • 6