Clever Geek Handbook

Duplicate toastr error messages

I am using a JavaScript library Toastr 2.1

to display temporary message input error messages. I set the parameter preventDuplicates

to true. He does not work. I still see duplicate messages when users hit the submit button quickly (clicks are faster than "timeout").

Here are my default toastr settings:

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?

+5


source to share


7 replies


this can help



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

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


source


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



+2


source


I believe it works as expected

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

Perhaps this is the property you are looking for?

preventOpenDuplicates: Prevent duplicates of open toasts.
+2


source


I have the same requirements as you. Below is my implementation. See if this 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);
}
Run codeHide result


The code should check if there is an existing toastr error that displays the same message. I will only fire toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored further, but I'll leave it in a way that makes it easier for others to understand.

+1


source


Search preventDuplicates

in toastr.min.js and changes

preventDuplicates:!1

in

preventDuplicates:1
+1


source


this can help.

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

put it in your toastr config.and it should work. The launched toastr is set to 1, and the timeout is 100.

0


source


Add Prevention Duplicates: 1 to

toastr.options = {maxOpened: 1, avoid duplicates: 1,};

0


source






More articles:


All Articles