How can I clear previous toastr before showing the new one and set a timeout between them?

Question

I am using Angular toastr and I am stuck at passing a delay between hiding the previous toastr and showing the next one. There should be only one toastr at a time. I am hiding and showing it, but there is no visual difference, and still the toast messages are the same, the user is not able to distinguish which was previous and wich is next toast. I am firing them with two functions. Any help would be appreciated.

This is my setup:

        autoDismiss: true,
        maxOpened: 2,
        newestOnTop: true,
        extendedTimeOut: 1000,
        tapToDismiss: false,
        timeOut: 5000

Ghazanfar Khan · Answer 1 · 2019-05-23T10:23:50.057

15

Immediately remove current toasts without using animation

toastr.remove()

Remove current toasts using animation

toastr.clear()

Every thing is mention on github

edited May 23 '19 at 10:23

answered Dec 06 '16 at 18:25

Ghazanfar Khan

3,648
8
44
89

I am using toastr.clear(), and they are getting cleared, the problem is that no animation is showing, and the user does not know when the first toastr is gone and when the second one appears. – Petya Naumova Dec 07 '16 at 07:29

score 3 · Accepted Answer · answered Dec 06 '16 at 18:31

3

Set

maxOpened: 1

in toastrConfig. This will prevent toasts from stacking and the second one will show up as soon as the first one expires.

answered Dec 06 '16 at 18:31

Fjut

1,314
12
23

Thanks, your answer is right, I know that is the correct way to do it, what I missed to say, is that I should not change the global settings because that will affect all other toastrs in the application, and I don't want that. I need a way to customize only the toastrs in this specific page. I am using toastr.clear(), and they are getting cleared, the problem is that no animation is showing, and the user does not know when the first toastr is gone and when the second one appears. – Petya Naumova Dec 07 '16 at 07:28
2

I found a solution, which was to call toastr.clear() before showing the new toastr in a specific place in my function. Your answer is, however, right for setting up the max nuber of toastrs, so I accepted it. – Petya Naumova Dec 07 '16 at 12:44

score 0 · Answer 3 · edited Dec 13 '22 at 15:52

Just use this before calling your toastr. It will Remove the current toasts using animation

toastr.clear()

function CopyVideoUrl(row_id) {
  toastr.clear(); // Remove the current toasts
  
  row_id.select();
  row_id.setSelectionRange(0, 99999); /*For mobile devices*/
  
  document.execCommand("copy");
  toastr.success('Reference Url has been copied.', 'Success', {
    timeOut: 3000
  });
}

<!-- Use jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Use Toastr in Head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<input readonly type="text" class="form-control" id="input_url" onmousedown="CopyVideoUrl(input_url)" value="https://www.google.com/">

How can I clear previous toastr before showing the new one and set a timeout between them?

3 Answers3