senthilporunan / jrate Goto Github PK

When I click the widget to rate an item the method in onSet is called twice.

when i click on 3rd star the 3rd star is highligted then.but when i click on reset button to reset star to zero value mean no star is selected i have tried to do this but it creats a new 5 five next to previous 5 stars..
Here is my code
$(".jRate").jRate({
onSet: function(rating) {
alert(rating);
}
});
On reset button
$('.reset').on('click',function(){
$(".jRate").jRate({
rating: 0,
});
});

It would be nice to be able to specify the stroke width for the shapes. The default value could be undefined and each shape could set its own default by way of using

settings.strokeWidth = settings.strokeWidth || "2px"; // or whatever default that shape needs

I have a set up where I call multiple jRates through an Ajax request on the same page (10 to be exact), each is supposed to have a separate rating. The settings are dynamically created with a default value / read only etc. In Chrome there are no problems, every one has it's correct value. In Mozilla FireFox and Internet Explorer the following 9 jRates take the value from the 1st one, to which I can not override even if I hard code a number. I have tried everything from spacing out the divs to making them separate scripts, nothing is working. I am not sure why Google Chrome has no problem with this but the other two do, if this fails I will just have to use images, but I would like to resolve the issue.

There is also another jRate called WAY earlier in the script that has no problems at all, if that is any help. The 10 that are problematic are called one after the other, each within a respective span inside a paragraph tag. I am not sure if the consecutive calls are causing it to fail or if there is another underlying factor.

Thank you for your time.

Hi, thanks for the library, your demo not working ! i have ctrl +u the file include in it but still blank no start, what do i wrong here ?

I really like the potential that jRate has. However, I have discovered that an ID attribute is required to use jRate. The issue doesn't show up until many instances of jRate get placed in the DOM. There is an assumption that an ID is on the node in which jRate is called, but that should not always be assumed. I typically don't use id's to reference objects, but rather more general data attribute such as [data-js-ratings="x.x"] as it is easier to loop through multiple items in the DOM using:

var $ratings = $('[data-js-ratings]');

$ratings.each(function(index){
  var $curRating = $(this);

  $curRating.attr('id', 'jrate'+index); // setting an ID here should not be required

  var rate = $curRating.data('js-ratings');
  $curRating.jRate({
    rating: rate,
    readOnly: true
 });
});

In my case I use jRate to apply over 60 ratings from a DB on a page. The reference data-js-ratings will loop through each node and apply the rating accordingly. The problem is if there is no id the reference in the jRate script references "undefined" and the scope on which star needing to set gets confused as multiple svg items with the same ID get placed in the DOM and there can be only one unique ID per DOM. Why scope things using an ID anyway? There are more efficient ways to do a lookup than through an ID.

For now, I have put an ID on the item in my loop according to the index, but shouldn't be necessary.

I suggest using the data attribute to hold the references to stars, so that the setting/changing of the stars doesn't have to lookup and search through the DOM using find. The scope should remain within the node component and not traverse elsewhere. Using ID to find in inner item is the root of the issue.

I am trying to get value from Jrate Plugin for example when the using click on 3rd start the value should i get should must be 3.and i can get it on using jRate onSet option
$("#jRate").jRate({
onSet: function(rating) {
alert("Selected Rating: "+rating);
}
});
but i dont want to get the value on onSet function i want value when user click on save button just like how we get value from inout box $('#inputbox'),val();
Is their any way i can get value like this..

HTML markup:
<rating name="one"></rating>
<rating name="two"></rating>

Javascript:
var $rating = $('rating');
$($rating[0]).append('<stars></stars>').find('stars').jRate();
$($rating[1]).append('<stars></stars>').find('stars').jRate();

Result:
You will get two rating controls that behave as one, i.e. they both update on mouseover regardless of the control you are using.

Expected Result:
The controls should work independently because they are bound to different HTML nodes.

Workaround:
Setting id attribute on the binding element seems to resolve the issue:

var $rating = $('rating');
$($rating[0]).append('<stars id="first"></stars>').find('stars').jRate();
$($rating[1]).append('<stars id="second"></stars>').find('stars').jRate();

I'm trying to use your plugin with class selectors. Html is rendered but only first element is colored on hover

$('#item').jRate({precision: 0}); works as expected - the Star or other items only highlight in full. If you combine precision with min, max or count, though (e.g. $('#item').jRate({min: 1, max: 7, count: 7, precision: 0}); ), the Star or other items will be partially highlighted instead of highlighted in full. rating returns correctly as a whole number, but the display is misleading as the last item may be partially selected.

Currently, if you create a rating with the following options:

$("#jRate").jRate({
            width: 80,
            height: 80,
            shapeGap: "10px",
            rating: 4
});

the stars will highlight when you're over the star itself, but when you leave the star and are in the gap in between, it will revert back to the previous selection (in this example: 4).

If a div was placed over the svg so that it covered a rectangular area including (shapeGap / 2) pixels on each side, this wouldn't be a problem. Possibly this could be also fixed by extending the svg with a transparent section into the gap.

Hi! Thanks for your project!
I need stars to be transparent with white borders when rating not set. Is there any way to do this?

when use the function of onSet, the function of onSet works twice, I can't find the reason of question;
onSet: function(rating) {
// console.log("OnSet: Rating: "+rating);--->twice
jRateScore['jRateScore'+i] = rating;--->twice
}

The partial star selection, returning a decimal number, is clever, but this is an exotic use-case, and most people want to have 5 stars and get an integer from 1 to 5 (and never allow zero to be a choice). (This is how reviews at Amazon et al work.)

There seems to be no combination of the configuration options to allow this, however.

My first workaround was to use all the defaults, and then in the onSet handler to do:

   function handleRatingChange(rating){
     rating = Math.ceil(rating);
     obj.setRating(rating);
     ...
   }

But the partial stars effect is distracting, so we just want each star to be on or off.

I've tried precision:1, but the star can only be selected by clicking in the right-hand side of it. E.g. clicking in the left hand side of the middle star calls onSet(2) not onSet(3). Clicking the left-hand side of the first star calls onSet(0).

Trying to be explicit about all settings with precision:1,min:1,max:5,count:5,minSelected:1 is weird: mouse-over the first star fills in the first star, and a bit of the second star. Mouseover the middle star fills in part of it. (This is similar to #4, I think.)

In our case, we are using the shape STAR and the html base-tag is set.
SVG cannot handle the internal reference (fill: url) to an id. you have to set an absolute url.

We've fixed it with: url('+document.location.href+"#"+r+"_grad"+n+")
This fix only works for us, because we does not have url with internal links.

After minification expression + +settings.transparency + become ++settings.transparency+ and causes error:

Invalid left-hand side expression in postfix operation

Please kindly replace them with + (+settings.transparency) +.

Thank you!

First of all: great job with this plugin - really like it a lot. Especially presenting the stars as svg is great since it is always a pain to modify star images in case you want them differently.

A couple of feature requests:

1. Ability to assign ids to ratings and then pass them back in the change/set events. For example if I have a survey with questions, I want to know for which question the rating is. I can do this in jQuery but it would be more convenient to have it built in.
2. Ability to check if all ratings have been checked (e.g. in a survey all questions have to be answered).

Thanks!

Hello there.

Is there any way to have multiple jRate instances within a page, but only call $("#jRate").jRate(); once?

Let's say I would like to have 5 jRate instances and each one of them has a predefined rating (obtained through a database). Does this mean I have to call $("#jRate").jRate(); 5 times, in order to obtain each rating, or can I use the #id (<div class="jRate" id="somethingUnique"></div>) inside the js code?

Thank you,
Ilias

it is working fine in desktop view but it is not working in small screens.

Create grunt task for jRate

hi my friend.

I want use jRate in my project but I need to change shape of star to shopping basket. could you please make it for me?

I attach you my shopping basket icon in svg format. please work on this icon.

many many thanks bro.