dreyescat / bootstrap-rating Goto Github PK

The classes in your CSS are rather generic. I'm going to have to do some LESS "namespace trickery" to make sure they don't clash with any of the other classes in our rather large and complex site.

no partial stars currently

I am trying to integrate it in my site, plugin is working fine but tooltip is not showing. Can u please help?

Just a suggestion: It would be nicer if you create a gh-pages branch to show your new ui component directly (your master branch's code works directly)

Hey there!

First of all, thank you for making this. Of all the plugins I could find, this one seems the most useful for my purposes.

I'm having a little trouble running this RoR.

I've imported four files into my project. "bootstrap-ratings" ,"bootstrap-ratings.min" and "Gruntfile" javascripts in my application.js file, and "bootstrap-rating.css into mi application.scss file.

application.js
//= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . //= require bootstrap-sprockets //= require bootstrap.min //= require bootstrap-rating //= require bootstrap-rating.min

aplication.scss
@import "bootstrap"; @import "bootstrap.min"; @import "bootstrap-rating";
When I use in my view, it looks fine, but if I try to use $('input').rating(2);for example (setting the rating to default to 2) in my reviews.coffee file ('Reviews' is the controller I'm using in this project) I get the following error.

Uncaught TypeError: $(...).rating is not a function

Also, if I try to attach an event, like in the example:

$('input').on('change', function () {
  alert('Rating: ' + $(this).val());
});

I'm getting SyntaxError: [stdin]:5:25: reserved word "function"

What am I doing wrong? Any help is greatly appreciated.

Hi
Thank you for an awesome, and very simple rating plugin!
I tried validate my html after adding your plugin, but this setting:

is not valid html. input with type "hidden" does not have a readonly property.

When explicitly calling $('input.rating').rating(); the bootstrap-rating is initialized twice.

Is this a desired behavior? A workaround is setting a different class.
If this is planned I would propose adding this to the doku.

Another solution would be adding a param:
e.g. $.fn.rating.defaults.autoInit = false;

Cheers bizarrochris

Hello,
I just noticed while implementing the code that data fraction is some how reversed direction on.Hover:

<input type="hidden" class="rating" data-fractions="2" value="4.5"/>

I get to fix the value="4.5", since the half star visible on page load was also reversed by changing this snippet .js (left:0 => right:0):

overflow:"hidden",right:0,width:0

However, didn`t get to fix the half star hover issue.

<input type="hidden" class="rating" data-fractions="10" id="ho_rating" value='{{rating}}' data-readonly data-filled="fa fa-star fa-2x" data-empty="fa fa-star-o fa-2x" />

the above code not showing stars.

Hi, I just found this and am excited to use it. Thanks for creating it.

I found what seems to be an interesting issue when using safari, Bootstrap 4, Font Awesome 5 and JQuery 3.2.1

https://use.fontawesome.com/releases/v5.0.6/js/all.js

Tested in Chrome, looks as expected:

In Safari (latest), the filled stars drop down to the next line leaving blank space where the empty star was.

Code:

<div class="col-md-4">
    <h5 class="text-center">Rate:</h5>
<input type="hidden" class="rating" data-filled="fas fa-star fa-2x" data-empty="far fa-star fa-2x" data-fractions="2"/>
</div>

Hi, I have a loop $.each , which shows dynamically 6 grades with star rating for each. I tried to inject .rating() to the loop, but no success. How makes .rating() work and show stars for every grade input field in the loop? Thank you.

For example:
$i = 0;
$.each(response, function (key, value) {
i++;
$('.input-grade').append(getHtml(i,
value.grading_criteria_id,
value.grading_criteria.name,
value.grading_criteria.description,
value.grade
));
$('input.grade-rating-' + i).rating({
filled: 'fa fa-star fa-sm',
filledSelected: 'fa fa-star fa-sm',
empty: 'fa fa-star-o fa-sm'
});
});

There's something wrong with my readonly rating. I have 5 stars rating with value 5, but rating icon is empty. For rating below 5, it works fine.

Hi,

very nice plugin. Thanks for sharing.

in the demo under Readonly rating with a fractional value, the value is 2.5 which should fill 2.5 stars but it only fills 2.

Is it possible to show 2.5 stars filled?

Thank you.

Hello @dreyescat ,

I have a new suggestion. Could you add font awesome icons pack? The implementation is very similar to Bootstrap's icons.

With this new feature your plugin could be more awesome :P.

Thank you :).

Would it be possible to make the selected rating be the only filled icon?

Something along this line:

On my iPhone 4 I have a problem with multiple ratings. For example I can choose 3 stars for the first rating. When I try to select 4 stars in the next row, the selection from the first row is lost!?

Any Suggestions?

use $('.c-rating').rating('rate', 0); to clear the rating. Thanks! please update end of the docs.

Thanks!

FF43 Win10 x64 - the cursor when hovering over the glyphs is the text select cursor instead of the default cursor.

PS: Thanks for this. I made my own (https://github.com/robertlabrie/bootstrap-star-rating), yours is better, please take a look at the cursor when you get a chance.

Thanks,
Rob

This is triggered twice, because already exists in plugin

$('input').on('change', function () {
alert('Rating: ' + $(this).val());
});

Hi, I tried to set the initial value by jQuery, but I find that the initial value can not be shown unless the mouse flies over it. I also tried to fire the hover event on the rating input, but it doesn't work either...

`````` html```

javascript
$("#evalscore").val(res.evalInfo.score)

Doesn't work !

Hi, is it possible to redefine the rating symbols in the following way?
I have tried, but it looks quite ugly...

css

.symbol-empty {
background-image: url("/ecosystem/images/market/st.h.png");
}

.symbol-filled {
background-image: url("/ecosystem/images/market/st.o.png");
}

.symbol {
width: 20px;
height: 20px;
}

I just tried to load the .JS file using jQuery.getScript() :

$.getScript("templates/js/bootstrap-rating.min.js", function() {
    $('input.rating').rating({
        filled: 'fa fa-star',
        filledSelected: 'fa fa-star',
        empty: 'fa fa-star-o'
    });
});

I found that customized rating symbols not override defaults, while work just fine when it was first included in HTML file!. Any help?

First of all, excellent plugin. Congratulations!

I do have one question/suggestion: is it possible to display half ratings in tooltips?
When I enabled "half ratings", I only see integer numbers in the tooltips (example: "Rate 4") even though the half stars are being correctly displayed. Am I missing something?

Thanks in advance for any help.

Using either:

input type="hidden" class="rating" data-start="0" data-stop="10" readonly="readonly" value="10"
Or even:
input type="hidden" class="rating" data-start="1" data-stop="10" readonly="readonly" value="10"

Displays empty stars.. No option for full rating.

Also, setting data-fractions="2" doesn't display value="9.5" properly.

I'm talking about setting manual values only.

Hello!

Is it at all possible to set the value of a bootstrap-rating displayer programatically?
I noticed another issue posted about it but it was subsequently closed without any information on a solution.
Regards

Please Update the Npm Package, to include this fix: #33

Hi,

It sould be interesting to create an NPM package. You already have a package.json on your project so it could be interesting to publish it on NPM

Thx

I have a problem. I'm using Vue.js and Laravel to paginate. I have Vue.js code:

new Vue({
            el: '.container',
            data: {
                reviews: [],
                pagination: {}
            },
            created: function () {
                this.fetchStories();
            },
            methods: {
                fetchStories: function (page_url) {
                    let vm = this;
                    page_url = page_url || '{{ route('admin.products.get-all-reviews') }}';
                    this.$http.get(page_url)
                        .then(function (response) {
                            vm.makePagination(response.data);
                            vm.reviews = response.data.data;
                        }).then(function () {
                            $('.container').find('.all-reviews-rating').rating();
                        });
                },
                makePagination: function(data){
                    let pagination = {
                        current_page: data.current_page,
                        last_page: data.last_page,
                        next_page_url: data.next_page_url,
                        prev_page_url: data.prev_page_url
                    };
                    this.pagination = pagination;
                }
            }
        });

I'm calling $('.container').find('.all-reviews-rating').rating(); after fetching data, but when I get second page it leaves first element's value to second page:

First Page:

Second Page:

As you can see. On the second page I have 1 star but it get's 5 stars. In HTML in input value it displays correctly.

How can we change the size of the glyph icons, I've can't figure out how to make them larger ...

Hi
I have implemented your plugin in my app. However how do you unselect the first star after it has been selected

You can unselect the other starts by clicking on the previous star but how do you unselect the first star after it has been selected.

Many thanks in advance

Hello @dreyescat ,

I am trying to show a tooltip (bootstrap) on hover but I can't do that. Have you any solution please?

Regards.

On any iOS device, I have a problem with multiple ratings. For example I can choose 3 stars for the first rating. When I try to select 4 stars in the next row, it modifies somehow randomly the rating from the previous row! After investigating a bit, it seems the rating value is not updated everytime wrt to the number of stars displayed, especially when the touch is at the border of the rate symbols...
The plugin works perfectly on Android and desktop.