toaster clear does not work inside a jQuery function

Question

I'm using Angular toaster messages. I use toaster.clear('*') to clear a toaster message and show the next toaster message. This works fine in my other situations.

However here it does not work. I clear the previous toaster message and change the text of the toaster, but the message changes only when I hover over it.

$("#pageColorPallette").change(function() {
  if ($scope.questionNumber == 1) {
    selectedcoler = $("#pageColorPallette").spectrum("get");
    selectedhexacoler = selectedcoler.toHexString();
    toaster.clear('*');
    var content = document.getElementById("editableTextArea");
    content.style.backgroundColor = selectedhexacoler;
    if (selectedhexacoler == '#ffffff') {
      if ($scope.attempts < 3) {
        $scope.addMarksGeneric($scope.activityThreeMarks, 10);
      }
      toaster.clear('*');
      toaster.pop({
        type: 'info',
        title: 'step 2',
        body: ' body of step two message',
        toasterId: 2
      });
      $scope.questionNumber = $scope.questionNumber + 1;
    } else {
      $scope.deductMarksGeneric($scope.activityThreeMarks, 5);
      toaster.pop({
        type: 'error',
        title: 'try again',
        body: 'please try again.',
        toasterId: 2
      });
    }
  } else {
    $scope.deductMarksGeneric($scope.activityThreeMarks, 5);
    toaster.pop({
      type: 'error',
      title: 'try again',
      body: ' Please continue according to the steps.',
      toasterId: 2
    });
  }
});

Answer 1

The error - "TypeError: $.toast is not a function" is telling you that the method toast() is not present in your JS file.

The most probable cause of this error is because you may be referencing some jQuery plugin in your website. But the plugin is not present in your website. You can correct by adding the plugin in your website to correct this problem.