search

eddysilvamendes / jquery-star-rating-plugin

Automatically exported from code.google.com/p/jquery-star-rating-plugin
0 stars 0 forks source link

Each star in the list has the text "on" superimposed #100

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?
1. Link jquery.form.js, jquery.rating.js (or jquery.rating.pack.js), and 
jquery.rating.css in the <head> tag.
2. Add several <input name="ratingStar" type="radio" class="star"/> radio 
buttons to a form.
3. Load the page in any browser.

What is the expected output? What do you see instead?

I expect to see one star for each radio button.

Instead, I see one star for each radio button with the text "on" superimposed 
on every single star.

What version of the plugin/jQuery are you using?
PLUGIN VERSION: v3.14 - 2012-01-26
JQUERY VERSION: ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

On what browser(s) or operating system?
BROWSER(S): IE9, Firefox15.0a1, Chrome 18.0.1025.168 m
on Windows 7 Enterprise Service Pack 1

Please provide a link to where the problem can be observed:
URL: on intranet, sorry, but here's the basic html file I'm using from within 
the plugin's folder for testing:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<link 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.cs
s" rel="stylesheet" type="text/css"/>
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></scrip
t>
<script src="jquery.form.js" type="text/javascript"></script>
<link href="star-rating/jquery.rating.css" rel="stylesheet" type="text/css" 
media="screen"/>
<script src="jquery.rating.js" type="text/javascript"></script>
</head>
<body>
<div id="ratingBar">
  <input name="ratingStar" type="radio" class="star"/>
  <input name="ratingStar" type="radio" class="star"/>
  <input name="ratingStar" type="radio" class="star"/>
  <input name="ratingStar" type="radio" class="star"/>
  <input name="ratingStar" type="radio" class="star"/>
</div>
</body>
</html>

Feel free to provide any additional information below.

I took a look through the unpacked plugin code, and I suspect this is due to 
the part where it appends an anchor tag to the document, and gives it a value / 
some content.  Specifically, this line:

var star = $('<div class="star-rating rater-'+ control.serial +'"><a title="' + 
(this.title || this.value) + '">' + this.value + '</a></div>');

If I delete: ' + this.value + '
it appears to function normally, though I don't know if removing that bit will 
have an effect on the functionality of the plugin when it's used with a live 
form.

Please advise.

Original issue reported on code.google.com by adrian.t...@gmail.com on 18 May 2012 at 9:35

Attachments:

GoogleCodeExporter commented 8 years ago 
I tried your code and it all seems to work. Are you sure there is no other css 
on the page? Or can you tell me the browser where you experienced the problem? 
I've tried IE, Opera, Safari, FF and Chrome.

See: http://jsfiddle.net/spinal007/ZJgY9/

Original comment by diego.a...@gmail.com on 22 May 2012 at 11:05

GoogleCodeExporter commented 8 years ago 
The project I was working on has since abandoned the need for a star rating 
system.  Nonetheless, I tested it in the following browsers on Windows 7 
Enterprise Service Pack 1:

IE9, Firefox15.0a1, Chrome 18.0.1025.168

I just re-tested the same file from last time, and received the same problems.

I *am* testing it from a local file path (URL begins with file:///) but seeing 
as this is a JavaScript-based solution, it should still be working.

**goes away for a minute**

**returns**

ok, so I'm just a dummy. I accidentally put the wrong filepath to the CSS and 
just continually overlooked it, because for some reason it never showed up as 
unreachable in the error logs in Firefox's Console.

So I guess it was just a big misunderstanding. :)

Original comment by adrian.t...@gmail.com on 6 Jun 2012 at 8:46

Attachments:

GoogleCodeExporter commented 8 years ago 
Hi,

How to make this work for more than 1 inputs?
I want to provide 3 rating options one below the other.
I tried replicating the code but the stars appear joint. i.e 30 stars next to 
each other instead of 10 on each line.

Original comment by anike...@gmail.com on 19 Sep 2012 at 8:10

GoogleCodeExporter commented 8 years ago 
Define the value in the input
( <input name="ratingStar" type="radio" class="star" value="I'm also the 
Mousover"/>

Original comment by philipp....@gmail.com on 30 Jan 2013 at 12:18

GoogleCodeExporter commented 8 years ago

Original comment by diego.a...@gmail.com on 23 Feb 2013 at 5:15