Duplicate toastr error messages

Question

I am using the Toastr 2.1 JavaScript library to display transient user input validation error messages. I set preventDuplicates option to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession (clicks are faster than 'timeout').

Here are my toastr defaults:

function getDefaults() {
    return {
        tapToDismiss: true,
        toastClass: 'toast',
        containerId: 'toast-container',
        debug: false,

        showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
        showDuration: 300,
        showEasing: 'swing', //swing and linear are built into jQuery
        onShown: undefined,
        hideMethod: 'fadeOut',
        hideDuration: 1000,
        hideEasing: 'swing',
        onHidden: undefined,

        extendedTimeOut: 1000,
        iconClasses: {
            error: 'toast-error',
            info: 'toast-info',
            success: 'toast-success',
            warning: 'toast-warning'
        },
        iconClass: 'toast-info',
        positionClass: 'toast-top-right',
        timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
        titleClass: 'toast-title',
        messageClass: 'toast-message',
        target: 'body',
        closeHtml: '<button>&times;</button>',
        newestOnTop: true,
        preventDuplicates: true,
        progressBar: false
    };
}

Do i need to make any other changes to prevent duplicate error messages?

Answer 1

I have the same requirements as you. Below is my implementation. See if it can help you.

function hasSameErrorToastr(message){

  var hasSameErrorToastr = false;

  var $toastContainer = $('#toast-container');
  if ($toastContainer.length > 0) {
    var $errorToastr = $toastContainer.find('.toast-error');
    if ($errorToastr.length > 0) {
      var currentText = $errorToastr.find('.toast-message').text();
      var areEqual = message.toUpperCase() === currentText.toUpperCase();
      if (areEqual) {
        hasSameErrorToastr = true;
      }
    }
  }

  return hasSameErrorToastr;
}

//Usage
var message = 'Error deleting user';
if (hasSameErrorToastr(message)) {
    toastr.error(message, title, errorToastrOptions);
}

The code is to check whether there are existing error toastr which has the same message being displayed. I will only fire the toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored futher more but I'll leave it like this so that its more easier to understand for others.

Answer 2

I had the same issue and it turned out that toastr preventDuplicates option does not work for array messages (current version 2.1.1). You need to convert the array to string using join.

Answer 3

I believe it's working as expected

preventDuplicates: Prevent duplicates of the **last toast**.

Perhaps this is the property you are looking for?

preventOpenDuplicates: Prevent duplicates of open toasts.

Answer 4

this may help.

var config = {
    maxOpened: 1,
    timeOut: 100
}

put it in your toastr config.and it should work.opened toastr is made to 1,and timeout set to 100.

Answer 5

this may help

toastr.options = {
"preventDuplicates": true,
"preventOpenDuplicates": true
};

toastr.error("Your Message","Your Title",{timeOut: 5000});

Answer 6

Search preventDuplicates in toastr.min.js and change

preventDuplicates:!1

to

preventDuplicates:1

Answer 7

Add preventDuplicates:1 to

toastr.options = {
  maxOpened: 1,
  preventDuplicates:1,
  autoDismiss: true
};

Answer 8

I was facing the same issue ngx-toastr and resolved by adding the below code in my module file.

ToastrModule.forRoot({
  maxOpened: 1,
  preventDuplicates: true,
  autoDismiss: true
})

Also, if lazy loading is implemented, then you need to add the same lines of code to your parent module file also as I've added in my app.module.ts

Answer 9

imports: [
  ToastrModule.forRoot({
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
  }),
],

this is also present in npm for ngx-toastr documentation. you can add it in your app module.ts to see the change.

Answer 10

I added this in the constructor and it worked for me

this.toastr.toastrConfig.preventDuplicates = true;

Answer 11

Try this one:

toastr.options.preventDuplicates = true;