Rating a page by selecting stars – Using Javascript and Ajax
I am working on an application, where I had to catch the user response for rating a page. User selects some stars (out of 5) and then clicks on it to rate. The user’s response must be recorded when he clicks on the star.
As I am working on JSF, I searched for some components like this. There are many Richfaces components available for users with very much customized features. But I didn’t find any rating component. I didn’t have had much time to develop one component for this myself. My first choice was to use JavaScript and Ajax to record the response.
The design is to collect user input and use an Ajax call to send this response to a Servlet, which will record the rating. Also I had to avoid multiple rating by same client. JavaScript part is to capture user response and create effect of selecting a star. When user moves mouse over the starts, they look to be selected. For this I used 2 star images, one is plain and another is colored. Initially all plain 5 starts will be displayed.
<img src=”/images/starPlain.gif” onmouseover=”selectStart(this.id)” onclick=”captureStar(this.id)” onmouseout=”deselectStar(this.id)” id=”star1″ />
<img src=”/images/starPlain.gif” onmouseover=”selectStart(this.id)” onclick=”captureStar(this.id)” onmouseout=”deselectStar(this.id)” id=”star2″ />
…………… for all 5 starts (id is start1 , star 2 .. star 5)
Also the star images will be preloaded using JavaScript.
var plainstar = new Image();
plainstar.src = “../images/starPlain.jpg”;
var colorstar = new Image();
colorstar.src = “../images/starColored.jpg”;
Each plain start image will have a unique id, a JavaScript function to be called for mouseOver ,mouseOut and onClick events. The mouse over function will replace current and all left side star images to colored star images. Mouse Out event will replace all colored starts by plain stars.
For each <img/>, we have onmouseover=”selectStart(this.id)”. This function changes current star (which called the function) and all the starts left, to colored stars. This can be achieved using the id. For Example: 4th start id is star4. When mouse is placed on this star, we have to make all the left side stars and current star colored. Get the current star id, (star4) change current and all small number id stars (star1, star2,star3) to colored.
function selectStart (id) would be like:
if(id == “star1″)
{
document.getElementById(’star1’).src = colorstar.src;
}else if(id == ‘star2’){
document.getElementById(’star1’).src = colorstar.src;
document.getElementById(’star2’).src = colorstar.src;
}
.
.
.
Here we are replacing the current and left start by colored one.
Once user clicks on the star, we call captureStar() function. This star identifies the star on which the mouse was clicked using the id, and stored the number.
captureStar() function would be to save, selected star rating data. Below I am saving rating in a field called starCount.
if(id == “star1″)
{
starCount = 1;
}else if(id == ‘star2’){
starCount = 2;
}
.
.
.
.
Now its time to make ajax call to our servlet to record star rating. This servlet could be a simple servlet implementing service or doGet method, which reads the request parameter ’starParam’
For firefox and Netscape following code works:
var xmlhttp = new XMLHttpRequest();
var url = url to servlet
if (typeof xmlhttp == “undefined”)
alert(“XMLHttp cannot be created!”);
else
{
xmlhttp.open(“GET”, url+”starParam=”+a, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null);
}
Starring logic is done.
Hope this helps!
