Jump to content
  • 0

Star ratings


NikkiC
 Share

Question

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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>

 

Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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.

image.png.380c0ca114032d9650630a54fbdd2a28.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...