Forum | Appery.io

Hey can you help me increasing the star size a little bit?

Can you help me saving the rating in my database ?

It will be great to hear from you soon!

can you please tell me which value of JSON? And also the Mapping part?

Thanks!

Hi umama. Glad it helped but not sure what strategy you are using for your database. I imagine you are already saving other types of data to your database, if so then it would be mater of getting the selected rating value out to some variable so you can use it anywhere you want. You can either use a variable, read it into a hidden label field or to have it globally available store it in LocalStorage (may be over kill). I would use the auto submit type of star which allows you to provide a callback within which you can do anything you want. Replace the previous code with this:

        <link type="text/css" rel="stylesheet" href="files/views/assets/css/jquery.rating.css"/> 
     <script type="text/javascript" src="files/views/assets/js/jquery.rating.js"> 
     </script> 
     <script type="text/javascript" src="files/views/assets/js/jquery.rating.pack.js"> 
     </script> 

 <script> 

$(function(){
$('.auto-submit-star').rating(
{
callback: function(value, link)
{

         alert("The value selected was '" + value); 
          // Store it in some hidden fields. i.e. a hiddlen lable component named lblTest 
         Apperyio('lblTest').text(value); 
         // Or 
         localStorage.setItem ("Selected_Rating_Value", value ); 
     } 

});
});
</script>

 <input class="auto-submit-star" type="radio" name="star1" value ="1"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="2"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="3"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="4"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="5" />

Wow !! ..Thank you so much, it is working !!

Can you also tell me how to create two different rating star on the same page ?

I am really glad and I am so thankful to you in helping and resolving this problem to this point. Stay blessed and Happy !!

Not sure what you mean by two different rating stars. If you mean two different sets then you should name the sets differently. In the example above the set is named "Star1", the new set should have another name assigned to all its stars. You can use the same function to see which set was clicked on by using the "this.name:" as follows:
<script>
$(function(){
$('.auto-submit-star').rating(
{
callback: function(value, link)
{

         alert("The rating name = " + this.name + " value:" + value); 

     } 

});
});
</script>
<p>

 <input class="auto-submit-star" type="radio" name="star1" value ="1"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="2"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="3"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="4"/> 
 <input class="auto-submit-star" type="radio" name="star1" value ="5" /> 

  <br> 
  <br>     
 <input class="auto-submit-star" type="radio" name="star2" value ="1"/> 
 <input class="auto-submit-star" type="radio" name="star2" value ="2"/> 
 <input class="auto-submit-star" type="radio" name="star2" value ="3"/> 

/>

Thankyou So much Mark ! It is working awesome ! StayBlessed !!

Umama,

Could you clarify what have you tried and what exactly does not work?

Hey this problem was solved .. Thanks!

Mark only last thing .. can I increase the size of the stars through javascript ?