javascript - Semantic UI Ratings not displayed - Stack Overflow

I cannot make the ratings element displayed. It simply does not appear. All other things work fine enough

I have linked these properly:

• Semantic UI CSS (.min.css)
• Semantic UI JS (.min.js)
• JQuery (.1.4/jquery.min.js)

And I use it like this:

<div class="ui star rating" data-rating="4"></div>

Do I need to do something else to make it work?

I cannot make the ratings element displayed. It simply does not appear. All other things work fine enough

I have linked these properly:

• Semantic UI CSS (http://semantic-ui./dist/semantic.min.css)
• Semantic UI JS (http://semantic-ui./dist/semantic.min.js)
• JQuery (https://ajax.googleapis./ajax/libs/jquery/2.1.4/jquery.min.js)

And I use it like this:

<div class="ui star rating" data-rating="4"></div>

Do I need to do something else to make it work?

• javascript
• jquery
• html
• css
• semantic-ui

Share Improve this question Follow edited Dec 16, 2015 at 16:45 Fᴀʀʜᴀɴ Aɴᴀᴍ asked Dec 16, 2015 at 14:31 Fᴀʀʜᴀɴ AɴᴀᴍFᴀʀʜᴀɴ Aɴᴀᴍ 6,25155 gold badges3333 silver badges5353 bronze badges 11

• Well the semantic links you provided do not load for me, could that be why? Or is that just me. – chriz Commented Dec 16, 2015 at 14:42
• This works semantic-ui./dist/semantic.min.css – chriz Commented Dec 16, 2015 at 14:43
• I posted https instead of http sorry. – Fᴀʀʜᴀɴ Aɴᴀᴍ Commented Dec 16, 2015 at 16:45
• Are you calling the rating in your jQuery? $('.rating').rating(); ; – chriz Commented Dec 16, 2015 at 16:48
• It is not even displaying. – Fᴀʀʜᴀɴ Aɴᴀᴍ Commented Dec 16, 2015 at 16:48

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 6

You need to initialize the rating plugin on the .rating div element in jQuery.

Either add this to your .js file:

// This waits for the DOM to load correctly before changing elements
$(document).ready(function(){
    // All your normal JS code goes in here
    $(".rating").rating();
});

Or if you don't have a .js file you can just include this Javascript/jQuery on each page the rating needs displayed.

<script type="text/javascript">$(document).ready(function(){$(".rating").rating();});</script>

And that will give you the same effect.

You can also specify different options within the initialization:

$('.rating')
  .rating({
    initialRating: 3,
    maxRating: 5
  })
;

You can find a list of options and other examples here: http://semantic-ui./modules/rating.html