Topic: Ratings is not working

dcoderk priority asked 4 years ago


Expected behavior working Actual behavior not working Resources (screenshots, code snippets etc.)

pls. check why your ratings sample is not working https://mdbootstrap.com/snippets/jquery/dcoderk/927324


Russel S free answered 3 years ago


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


Krzysztof Wilk staff commented 3 years ago

Hi!

Did you buy this plugin? Did you link src files as it is written on this page?

If both answers are yes - could you share your code with me using our online editor? You can find it here: https://mdbootstrap.com/snippets/ :)

Best regards


MDBootstrap staff answered 4 years ago


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.


Geetha Ramachandran free commented 3 years ago

How do i store this rating in database?


Tomek Makowski staff commented 3 years ago

unfortunately, we only provide frontend support. You have to create database on your own.

Regards


karolla86 free answered 4 years ago


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();

MDBootstrap staff answered 4 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: mobile, desktop
  • Browser: chrome,firefox,opera
  • OS: ubuntu 18.04, windows, mac
  • Provided sample code: No
  • Provided link: Yes