Star ratings

[NikkiC]

Hi there,

I'm trying to add a graphic star rating system to my site.  I've found the following: http://callmenick.com/post/five-star-rating-component-with-javascript-css which gets me about halfway there, but I just need some slight modifications!  This is what I have in my datapage so far:

<div id="el" class="c-rating"></div>

<script src="http://www.cambridgedata.org/Testboard/manager/five-star-rating-master/js/dist/rating.min.js"></script>
<script>
// target element
var el = document.querySelector('#el');

// current rating, or initial rating
var currentRating = [@field:QA_Tester_Rating#];

// max rating, i.e. number of stars you want
var maxRating= 5;

// callback to run after setting the rating
var callback = function(rating) { alert(rating); };

// rating instance
var myRating = rating(el, currentRating, maxRating, callback);

</script>

Where the field QA_Tester_Rating is the field in my table I want to read from and update using this system.

At present, it reads from the field fine when there is something already in there, but if the field is blank, the stars don't show at all, so this is my first problem - I'd like the 5 stars to appear, empty, on the page when there is no rating yet.

The second issue is that it's not updating my table.  I tried adding something along these lines:

document.getElementById("EditRecordQA_Tester_Rating").value=myRating;

But my javascript is terrible and it obviously didn't work.

Last issue, I would like to remove the popup alert when you change the rating.  I thought it would be as simple as removing the bit that says:

{ alert(rating); }

But that didn't work either!

Any help you can give would be much appreciated!

Nikki

[NikkiC]

Please, anyone??!!

[Vitalikssssss]

Hi NikkiC,

I`ve made some modification to your JS. Try to use a snippet of code below. It should resolve all described issues.

Hope this helps.

<div id="el" class="c-rating"></div>

<script src="http://www.cambridgedata.org/Testboard/manager/five-star-rating-master/js/dist/rating.min.js"></script>

<script>
// target element
var el = document.querySelector('#el');

// current rating, or initial rating
var currentRating = '[@field:QA_Tester_Rating#]';

// max rating, i.e. number of stars you want
var maxRating= 5;

// callback to run after setting the rating
var callback =  function(rating) { document.getElementById('EditRecordQA_Tester_Rating').value = rating; };

// rating instance
var myRating = rating(el, currentRating, maxRating, callback);

</script>

 

[NikkiC]

Thank you very much! 

I've now realised I need to do something else here ... is this possible?

Is there a way to amend this code to check if QA_Tester_Rating has changed, and if so pass a timestamp as a parameter to a new field QA_Tester_Rating_Date? 

Many thanks!

[4392788014]

Hello, 

I would like to insert star rating codes. For instance, I have consumers in Submission form when the someone modify the information I would like to have star ratings right after modification for each consumers. Means it would be able to have star rating each consumers according to the activities. And the rating result will be able to show in the result form. How can I do it? 

Thank you 

New user in  Caspio

[NailDyanC]

Just to add some additional information. In Caspio Release 25, you may now use unicodes. Caspio now supports Unicode symbols so you can display emoji characters and other symbols directly in your apps. They can be used in Tables, Views, DataPages, Email/SMS Notifications, Localizations, Formulas, Triggered Actions and Application Tasks. The supported symbols are listed at https://unicode.org/emoji/charts/full-emoji-list.html.

[cheonsa]

Hi All, 

Caspio now offers different app extensions that can be implemented to your account. Per request or app extension has an associated cost. 

You may check this link for the different app extensions available: https://www.caspio.com/services/app-extensions/

 

 

[astroboy]

Hello there, Caspio recently launched an App Extension for bar rating and you may check this link out to get more information:

https://www.caspio.com/services/request-info/?e=Bar Rating

You may also check the rest of the available App Extensions in this link below:

https://www.caspio.com/services/app-extensions/