Hello

On the ratings page (https://mdbootstrap.com/docs/b4/jquery/plugins/rating/#docsTabsOverview) it states:

"Simply initiate rating on object with $().mdbRate(); and all needed components will get created."

I have tried placing this in the head and in the body of the html I am not sure where it goes.

I have placed the copied code under in the original index.html file as follows:

But I don't see the rating component when I look at it in chrome. Please help me so I know where I am going wrong.

Thanks

Hi karolla86,

In some way, yes, but you don't have to copy it each time. You have this code in file rating.js in mdb package in the addons folder. You need to add a link to it in your HTML as we showed in the docs: https://mdbootstrap.com/plugins/jquery/rating/

If you need additional help I am here for you.

PS In snippets we do not have implemented addons and that's why you have to copy code instead of linking to file.

Hey. We must to add all these code to our page?

(function ($) {
  $.fn.mdbRate = function () {
    var $stars;
    // Custom whitelist to allow for using HTML tags in popover content
    var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
    myDefaultWhiteList.textarea = [];
    myDefaultWhiteList.button = [];

    var $container = $(this);

    var titles = ['Very bad', 'Poor', 'OK', 'Good', 'Excellent'];

    for (var i = 0; i < 5; i++) {
      $container.append(`<i class="py-2 px-1 rate-popover" data-index="${i}" data-html="true" data-toggle="popover"
      data-placement="top" title="${titles[i]}"></i>`);
    }

    $stars = $container.children();

    if ($container.hasClass('rating-faces')) {
      $stars.addClass('far fa-meh-blank');
    } else if ($container.hasClass('empty-stars')) {
      $stars.addClass('far fa-star');
    } else {
      $stars.addClass('fas fa-star');
    }

    $stars.on('mouseover', function () {
      var index = $(this).attr('data-index');
      markStarsAsActive(index);
    });

    function markStarsAsActive(index) {
      unmarkActive();

      for (var i = 0; i <= index; i++) {

        if ($container.hasClass('rating-faces')) {
          $($stars.get(i)).removeClass('fa-meh-blank');
          $($stars.get(i)).addClass('live');

          switch (index) {
            case '0':
              $($stars.get(i)).addClass('fa-angry');
              break;
            case '1':
              $($stars.get(i)).addClass('fa-frown');
              break;
            case '2':
              $($stars.get(i)).addClass('fa-meh');
              break;
            case '3':
              $($stars.get(i)).addClass('fa-smile');
              break;
            case '4':
              $($stars.get(i)).addClass('fa-laugh');
              break;
          }

        } else if ($container.hasClass('empty-stars')) {
          $($stars.get(i)).addClass('fas');
          switch (index) {
            case '0':
              $($stars.get(i)).addClass('oneStar');
              break;
            case '1':
              $($stars.get(i)).addClass('twoStars');
              break;
            case '2':
              $($stars.get(i)).addClass('threeStars');
              break;
            case '3':
              $($stars.get(i)).addClass('fourStars');
              break;
            case '4':
              $($stars.get(i)).addClass('fiveStars');
              break;
          }
        } else {
          $($stars.get(i)).addClass('amber-text');

        }
      }
    }

    function unmarkActive() {
      $stars.parent().hasClass('rating-faces') ? $stars.addClass('fa-meh-blank') : $stars;
      $container.hasClass('empty-stars') ? $stars.removeClass('fas') : $container;
      $stars.removeClass('fa-angry fa-frown fa-meh fa-smile fa-laugh live oneStar twoStars threeStars fourStars fiveStars amber-text');
    }

    $stars.on('click', function () {
      $stars.popover('hide');
    });

    // Submit, you can add some extra custom code here
    // ex. to send the information to the server
    $container.on('click', '#voteSubmitButton', function () {
      $stars.popover('hide');
    });

    // Cancel, just close the popover
    $container.on('click', '#closePopoverButton', function () {
      $stars.popover('hide');
    });

    if ($container.hasClass('feedback')) {

      $(function () {
        $stars.popover({
          // Append popover to #rateMe to allow handling form inside the popover
          container: $container,
          // Custom content for popover
          content: `<div class="my-0 py-0"> <textarea type="text" style="font-size: 0.78rem" class="md-textarea form-control py-0" placeholder="Write us what can we improve" rows="3"></textarea> <button id="voteSubmitButton" type="submit" class="btn btn-sm btn-primary">Submit!</button> <button id="closePopoverButton" class="btn btn-flat btn-sm">Close</button>  </div>`
        });
      })
    }

    $stars.tooltip();
  }
})(jQuery);

$('#rateMe2').mdbRate();

Hi dcoderk,

In the docs we explain that you need to initiate the component with the function: $().mdbRate();

I forgot to place js initialization code in our snippets examples in the docs of this component. It will be fixed today. Our snippets work with core mdb package without add-ons. To create a working example in the snippet you need to manually copy our addon js code to the script field in snippets. Right now there is no other way to link js code in our snippets but it will be a new feature in the future.

I created a working example for you! https://mdbootstrap.com/snippets/jquery/pjoter-2-0/929850

I copied CSS code from our add-ons too to apply to style. You can read more about using addon in tab getting started on top of the docs page.

If you need additional help I am here for you.

Best Regards, Piotr