Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, those four stars should blink to indicate the previous rating. I am currently saving user votes in a database and retrieving the rate value, but I'm unsure of how to bind this rating value to the stars.

Below is the code snippet:

.stars on{background:url(../image/star_on.gif) no-repeat;}
.stars li{
    float:left;
    width:17px;
    height:17px;
   background-image: url( '../image/ratingStarEmpty.gif' );
    list-style-type:none;
    transition:all 0.2s linear;
}
.stars:hover li{
    background-image: url(../image/ratingStarFilled.gif);
}
.stars li:hover ~ li{
   background-image: url( '../image/ratingStarEmpty.gif' );
}

Jquery Code for Returning Star Value:

$.ajax({
                type: "POST",
                url:'User/UserHome.aspx/BindInner',
                data: '{id:'+ id +'}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function(msg)
                {
 var xmlDoc = $.parseXML(msg.d);
                var xml = $(xmlDoc);
                innpageCount = parseInt(xml.find("innerPageCount").eq(0).find("innerPageCount").text());     
                var inncommonload = xml.find("InnerCommentonload");
               // $("#MainBox"+id).find("#dvCustomers1 table").remove();
                inncommonload.each(function () {
 var sno=inncommonload.find("SNo").text();
 var rate=inncommonload.find("Rating").text();
        var star='<ul class="stars"><li class="starvalue" id="1star'+sno+'"  onclick="AnsMark('+sno+',1); return false;"><a></a></li><li class="starrr" id="2star'+sno+'"   onclick="AnsMark('+sno+',2); return false;"></li><li class="starrr" id="3star'+sno+'"  onclick="AnsMark('+sno+',3); return false;"></li><li class="starrr" id="4star'+sno+'"  onclick="AnsMark('+sno+',4); return false;"></li><li class="starrr" id="5star'+sno+'"   onclick="AnsMark('+sno+',5); return false;"></li></ul>';
 });

                },
                failure: function (msg) {
                    alert(msg.d);
                },
                error: function (msg) {
                    alert(msg.d);
                }
            });

Answer №1

If you're looking for a solution, check out this answer that may help: jQuery select all except first.

To easily round your rate to an integer, simply use a jQuery selector to select the specified number of stars and apply custom css styling as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

mobile screens causing bootstrap columns to overlap

The code I am working with is shown below: <div class="container"> <div class="col-md-3 calendar"> </div> <div class="col-md-9"> <button></button> (more buttons...) </div> < ...

"Using Java HttpServlet to send data as a Gson string, then retrieving it in JavaScript as

On the server side, I have this Java code snippet: public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("application/json;charset=UTF-8"); resp.setHeader("Cache-Control", "no-cach ...

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

What are the steps in creating a responsive UI with CSS?

How can I create a responsive UI using css for the following code snippet? <Text className="w-100 mt-0 align-self-center"> Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span> </Text> <Text classNam ...

Is it advantageous to employ several wrapper-divs inside section elements when working with HTML5 and CSS?

Back in the day, I learned how to create a website by enclosing all content below the body tag within a div with the class "wrapper." This approach made sense as it allowed for easy vertical and horizontal alignment of the entire content. Just yesterday, ...

Designing an interactive header interface using React and Material UI

My header.jsx file contains the following code: // Default Import Statements var Login = require(login.jsx) const HeaderComponent = React.createClass({ getInitialState () { return { loggedIn: false, }; }, render() { return ( ...

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

Troubleshooting CSS Carousel Navigation Problems

{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; ...

Exploring the world of jQuery and Ajax: Experimenting with implementing a POST method through Ajax and retrieving the response in HTML

Hey guys, I'm currently attempting to set up a basic HTML post method using Ajax. Take a look at the code snippet below: <?PHP function fetchInstagramData($url) { $ch = curl_init(); curl_setopt_array($ch, array( CURLOPT_URL => ...

Looking for assistance in creating my first basic jQuery plugin

I've taken on the challenge of creating my very first jQuery plugin, and it's turning out to be more complex than I initially anticipated. My goal is to develop something like this, where you specify the selector and indicate how many items shou ...

The value retrieved by JQuery attr remains constant

Hey everyone, I'm having an issue with getting the ID from a custom attribute using jQuery. When I try to debug, I keep getting the same value each time. I have an HTML table that lists posts from a database using PHP, each with its own specific ID. ...

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

Issue with box-sizing border-box not applying to top and bottom borders

Currently, I am in the process of developing my own responsive website. However, I have encountered an issue with the box-sizing border-box on the top and bottom borders of one specific image. The layout consists of two columns with images of varying heigh ...

Tips for displaying only one image when clicked and hiding other divs:

Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Currently, I am diligently working on the company service boxes and have a particular need... When hovering over: 1. The parent div should scale up and acquire box shadow without impacting the neighboring service boxes (it should appear to stand out above ...

Mastering the art of utilizing callback functions

As a newcomer to Javascript and Jquery, I am still learning the basics. One thing that confuses me is how javascript executes each line as it encounters it. In a certain scenario (when my value is greater than 9), the custom alert will trigger and the wind ...

Creating a static footer in AngularJS with material design: A step-by-step guide

This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...