I recently used jQuery Star Rating in a site, in that I faced a issue regarding the half star rating, for Eg. If the rating is 2 than it can be shown easily but if it is 2.5 it is a little bit difficult to show the correct rating on the plug in. Here is the code if you are facing this type of issue-
Here is the VF page code & apex class code. In this the calculate method is most important to show the half star rating.
Apex Class
===============================================
public with sharing class StarRatingController {
public decimal selctedAverage{get;set;}
public decimal averageStar{get;set;}
public List getSkillOptionsStar() {
List skillOptions = new List();
decimal dOption= 1.0;
string val= '';
for(integer i=0; i<>
{
val = string.valueOf(dOption);
skillOptions.add(new Selectoption(val,val)) ;
dOption += 0.5;
}
return skillOptions;
}
public List getSkillOptions() {
List skillOptions = new List();
decimal dOption= 1.0;
string val= '';
for(integer i=0; i<>
{
val = string.valueOf(dOption);
skillOptions.add(new Selectoption(val,val)) ;
dOption += 0.1;
}
return skillOptions;
}
public void calculate(){
string str = string.valueOf(selctedAverage);
decimal tempAvg = 0;
if(str.indexOf('.') > -1)
{
str = str.substring(0, str.indexOf('.') + 2);
}
if(str.indexOf('.5') > -1)
{
tempAvg = Double.valueOf(str);
}
else
{
tempAvg = Double.valueOf(str);
tempAvg = tempAvg.round();
}
averageStar = tempAvg + 0.5;
}
public StarRatingController(){
selctedAverage = 1;
averageStar = 1.5;
}
}
VF Code
=============================================
<table cellspacing="5" cellpadding="0" border="0"><tr>
<td>Select average rating :</td>
<td>
<apex:selectList value="{!selctedAverage}" size="1" id="listSelect" onchange="calculate()">
<apex:selectOptions value="{!SkillOptions}"/>
</apex:selectList>
</td>
</tr>
<tr>
<td>Rating :</td>
<td valign="top">
<apex:outputPanel id="pnlResult">
<div id="divStarRating">
<apex:selectList value="{!averageStar}" size="1">
<apex:selectOptions value="{!SkillOptionsStar}"/>
</apex:selectList>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#divStarRating").stars({
inputType: "select",
split: 2,
cancelShow: false,
disabled : true,
starWidth: 17
});
});
</script>
<br/>
<br/>
<apex:outputLabel value="selected value==> {!selctedAverage}" /> <br/>
<br/>
<apex:outputLabel value="calculated value==> {!averageStar}" />
</apex:outputPanel>
</td>
</tr>
</table>
<apex:actionFunction name="calculate" action="{!calculate}" rerender="pnlResult" status="calStatus"/>
<apex:actionStatus startText="Please wait..." id="calStatus"/>
