CODEWITHSUNDEEP
javascripttoastr
Jan Dan
Jan Dan

Reputation: 131

Duplicate toastr error messages

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?

Upvotes: 11

Views: 31023

Answers (11)

Sejal Varu
Sejal Varu

Reputation: 54

Try this one:

toastr.options.preventDuplicates = true;

Upvotes: 0

Shirayuki
Shirayuki

Reputation: 1

I added this in the constructor and it worked for me

this.toastr.toastrConfig.preventDuplicates = true;

Upvotes: 0

Exceptional One
Exceptional One

Reputation: 11

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.

Upvotes: 1

Hassan Saeed
Hassan Saeed

Reputation: 11

Add preventDuplicates:1 to 

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

Upvotes: 0

Sheena Singla
Sheena Singla

Reputation: 816

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

Upvotes: 1

ankit keshari
ankit keshari

Reputation: 159

Search preventDuplicates in toastr.min.js and change 

preventDuplicates:!1

to 

preventDuplicates:1

Upvotes: 0

Austin Rodrigues
Austin Rodrigues

Reputation: 471

this may help 

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

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

Upvotes: 15

zabusa
zabusa

Reputation: 2719

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.

Upvotes: 0

nimo
nimo

Reputation: 499

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.

Upvotes: 4

Ehsan
Ehsan

Reputation: 1022

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.

Upvotes: 2

osheh
osheh

Reputation: 105

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.

Upvotes: 1

Related Questions