Help with code for input element rating

I am trying to implement a rating system for items for which are in a repeater.
To achieve this I have followed this tutorial step by step: Velo Tutorial: Capturing and Displaying Ratings | Help Center | Wix.com

The problem is that I can’t get it to work for me. When I run it in preview and try to rate an item this is what it shows me:

I don’t know what mistake I’m making, I can’t save my users’ ratings. Please, some expert that can guide me? This is the code I am using:

$w.onReady( function () {
//TODO: write your page related code here…

});

export function ratingsInput1_change(event) {
$w( “#dataset1” ).onReady(() => {
// get the current item from the dataset
const currentItem = $w( “#dataset1” ).getCurrentItem();

// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.avg;
const count = currentItem.numRatings;
const total = currentItem.totalRatings;

// get the new rating from the ratings input
const newRating = $w( ‘#ratingsInput1’ ).value;

// calculate the new average rating based on the current
//average and count
const newAverageLong = (total + newRating) / (count + 1 );
// Round the average rating to 1 decimal point
const newAverageShort = Number.parseFloat(newAverageLong).toFixed( 1 );

// set the dataset fields to the new average, total
// ratings, and number of ratings
$w( ‘#dataset1’ ).setFieldValues({
‘rating’ : newAverageShort,
‘totalValoraciones’ : total + newRating,
‘numeroValoraciones’ : (count + 1 )
});

// save the dataset fields to the collection
$w( ‘#dataset1’ ).save()
. catch ((err) => {
console.log( ‘could not save new rating’ );
});
});
}

This is the URL: https://www.app-onlinebox.com/desafios-comunidad

Thanks in advance.

Hello Sebastian,

did you configure your database right?

Hello

Yes, I have added 3 numeric fields which I leave empty. The privacy settings I have also reviewed. The connector configuration was read / write

This one should work…

$w.onReady(function () {   });

export function ratingsInput1_change(event) {
 
    $w("#dataset1").onReady(() => {
 const currentItem = $w("#dataset1").getCurrentItem();
 const average = currentItem.avg;
 const count = currentItem.numRatings;
 const total = currentItem.totalRatings;
 const newRating = $w('#ratingsInput1').value;
 const newAverageLong = (total + newRating) / (count +1);
 const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);
        $w('#dataset1').setFieldValues({
 'avg': newAverageShort,
 'totalRatings': total + newRating,
 'numRatings': (count + 1)
        });
        $w('#dataset1').save()
        console.log("Rating completed.")
    });
}

All you have to do is…

  1. Copy&Paste this code and replace your own with this one.
  2. Creating a DATABASE (called as you want) and set up 3 REFERENCE-FIELDS (Avg / TotalRatings / NumRatings).
    All three fields set to NUMBER (in this example).


Now the RATING-INPUT should be ready.

Then you create an RATING-OUTPUT, through connecting a dataset with collection and the dataset (in this example dataset1) with OUTPUT-RATING.

Thank you very much for the help, I will try it in a moment and I will tell you how it turned out

I give you 15min, then i am going to bed :grin:

1 Like

Ok, for me it’s time to go to bed (2:20 in the morning :tired_face::sleeping::sleeping::sleeping::sleeping::sleeping::sleeping:)
Good luck!
If you need more assistance, my little Wix-World, could eventuelly help you :wink:

https://russian-dima.wixsite.com/meinewebsite/rating-system

EDIT:


LEAVE ME A RATING :rofl::rofl::rofl::rofl::rofl::rofl::rofl::rofl::rofl::rofl:

1 Like

Hello Russian-dima, I have followed your formula step by step and the same thing happens to me. Apparently this function cannot be applied on a repeater.

When I enter a rating it only changes the value of “numRatings” in the database, but “avg” and “totalRatings” are not modified in Live Data.

Today I will make a last test although I have already tried everything.

I will take a look tomorrow, today i was very busy, sorry.

See this Ratings by User Example.

Hello Yisrael,
i have to sign up to see the example? This example does not work for me.
And another question. You have a nice collection which should be completed.
https://www.grampsworkbench.com/examples
This one is not in your collection list:
https://www.wix.com/code-examples/wix-animations
:wink:

Hey there dima, the Ratings example I posted is meant to only allow registered users to post ratings, therefore to use the live site you need to sign up. However, the template should load without any problems and that’s actually the main thing.

My examples on GrampsWorkbench are just that, mine. I sometimes quickly cobble together an example as an answer to a question, and I don’t want to bother with the whole site design review process (yep, that’s cheating).

Other “official” Wix examples can be found here:

1 Like

:grinning: nice thanks!

that’s exactly what i need. The problem is that I’m still a newbie to wix code, so I don’t know how to apply it to my page. Think you can help me? I have submitted a request for help from a wix partner but have no answers.

URL Page:
https://www.app-onlinebox.com/desafios-comunidad

Definitely this way works to qualify on a page I recommend it, but it is not useful when you need to qualify several elements in a repeater. Thank you!

P.S.
How can i rate you? :nerd_face:

Hello Sebastian, could you solve yor issue already?

I haven’t solved it yet, do you think you can help me? outlandchile@live.cl

I have tried for nearly two weeks now without any success. One of your experts had a look direcly on my page but could not solve it either because something is seriously wrong with this example. Why shall you not connect the rating input element to the dataset? If you don´t do that nothing happends at all and if you connect it to Avg still nothing happends. You have to connect it to NumRatings but then the stats doubles or triples up when you click on a star. Extremely frustrating so I nearly go mad with this :angry: Please create an instruction video for beginners because this is extremely hard.

This is a very confusing instruction because it doesn´t work and on another page the same author has written that you shall connect the damn input element!

In your page

  1. Set your dataset’s mode to “Read and Write.” This will let your visitors update information in the collection.

  2. Add the following elements:

  3. A Ratings Display element connected to the new Number fields in your collection.

  4. A Ratings Input element your visitors can use to pick a rating for the item. You can use the default setting for the ratings, or define your own. Do not connect it to the dataset .

Source:

https://support.wix.com/en/article/velo-tutorial-capturing-and-displaying-ratings


Source:

https://support.wix.com/en/article/ratings-input

The RatingsInput element is not to be connected to the dataset (and collection). It gets the input from the user to be saved to the database collection. Once the database is updated, the RatingsDisplay element shows the current rating.

I don’t know who the “expert” was that looked at your site, but I just looked at your site and there are numerous errors in the code…

export function ratingsInput1_change(event) {
  console.log('Inside ratingsInput1_change event', event);
  $w.onReady(function () {
    $w("#dataset2").onReady(() => {
      let $item = $w.at(event.context); //Get context of clicked rating
      const newRating = $item("#ratingsInput1").value; //Get rating value 1-5
      console.log("New rating = ",newRating);
      const currentItem = $w("#dataset2").getCurrentItem();
      ...
}

In the above code, there are several problems a number of problems:
You incorrectly have a page onReady() function inside of your ratingsInput1_change() event handler. The page onReady() function should not be inside any other function.
You incorrectly have a dataset.onReady() function inside of the page onReady().
You are not accessing the correct dataset current item. You should be using $item and not $w for the dataset.

The tutorial you reference explains precisely what’s needed to implement a Ratings System. In order for this to work however, you will need to make sure that understand the basics of Velo programming. You might consider finding an expert developer on the Wix Marketplace to help you with your project.

@yisrael-wix Thanks for the information Yisrael but one of Velos oldest experts told me this (I don´t wanna hang him out here but you may guess):

“For starters, your $w(”#dataset2").onReady(() function should be inside your page load $w.onReady( function() so that it is not executed every time the ratingsInput1 button is clicked. More console.log statements may help also."

I suppose he was wrong then ha? :wink: You told me that the tutorial explains precisely what´s needed but I copied that code and have just replaced the original field- and dataset names with my own but it still doesn´t work. I use it on dynamic pages which others also have written makes it more complicated (or isnt it?).

This is my code now after the other expert made some changes and my field names is heterosexRatings, heterosexNumber and heterosexTotal (dataset 2). With a click on a rating star input the correct star is shown on the display element and the total numbers do increase each time BUT it increase with the same numbers that is represented by the star. For example if you click on star 2, the rating is updated with two numbers, from 42 to 44 and if you click on star 5 the rating is updated with 5 numbers, from 44 to 49 so some connection is clearly wrong but I can´t figure out which of them (I have really tried). And when I don´t connect the input element to the dataset absolutely nothing happends so please rewrite this code to a correct version and I would be greatly thankful:

export function ratingsInput1_change ( event ) {
console . log ( ‘Inside ratingsInput1_change event’ , event );

$w . onReady ( function () {
$w ( “#dataset2” ). onReady (() => {
let $item = $w . at ( event . context ); //Get context of clicked rating
const newRating = $item ( “#ratingsInput1” ). value ; //Get rating value 1-5
console . log ( "New rating = " , newRating );

  **const**  currentItem  =  $w ( "#dataset2" ). getCurrentItem (); 
     console . log  ( 'currentItem = ' ,  currentItem ); 
  **const**  average  =  currentItem . heterosexRatings ; 
  **const**  count  =  currentItem . heterosexNumber ; 
  **const**  total  =  currentItem . heterosexTotal ; 
     console . log ( 'average, count, total = ' , average ,  count ,  total ); 
  
  **const**  newAverageLong  = ( total  +  newRating ) / ( count  + 1 ); 
     console . log ( 'newAverageLong = ' ,  newAverageLong ); 
  **const**  newAverageShort  =  Number . parseFloat ( newAverageLong ). toFixed ( 1 ); 
     console . log ( 'newAverageShort = ' ,  newAverageShort ); 

     $w ( '#dataset2' ). setFieldValues ({ 
     'heterosexRatings' :  newAverageShort , 
     'heterosexTotal' :  total  +  newRating , 
     'heterosexNumber' :  count , 
  }); 
     $w ( '#dataset2' ). save () 
     . **catch** (( err ) => { 
        console . log ( 'could not save new rating, err = ' ,  err ); 
     }); 
  }); 

});
}