CODEWITHSUNDEEP
javascriptjqueryangularjstoastrangular-toastr
Gokul
Gokul

Reputation: 3231

Find and clear a toast (Toastr)

I have a page where there may be multiple toasts added dynamically using the plugin https://github.com/CodeSeven/toastr.

I have a link(Ok) on each toast on clicking that link I need to close only the particular toast not all toast that are visible. 

toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear();
});

In the above code I have used toastr.clear() method which clears all toasts.

Can anyone help me how to identify the toast of the Ok link clicked and clear only that toast?

Update #1:

I tried the answer given by @imjosh but, $(this).closest('.toast') finds the correct toast but toastr.clear($(this).closest('.toast')); doesn't close any toast.

If I store the toast object in a variable and pass as an argument to toastr.clear() it works. But, I don't know how to handle multiple toasts this way.

var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear(toast);
});

Update #2:

Sorry, I am using https://github.com/Foxandxss/angular-toastr plugin not the one I mentioned above.

Thanks.

Upvotes: 4

Views: 31988

Answers (5)

Oliver Staunton
Oliver Staunton

Reputation: 76

For anyone using normal toastr jQuery plugin: the demo page has the below code:

var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;

function getLastToast(){
    return $toastlast;
}
$('#clearlasttoast').click(function () {
    toastr.clear(getLastToast());
});
$('#cleartoasts').click(function () {
    toastr.clear();
});

So, when creating your toastr instance, assign it a variable within jQuery and then you can set that as a parameter when calling toastr.clear() to clear a specific toast.

Upvotes: 2

Strabek
Strabek

Reputation: 2511

I wanted to use:

toastr.options.onHidden = function() {}

and the option was to set 'closeButton: true' and:

$(this).closest('.toast').find('button.toast-close-button').click();

This way I was able to use all benefits of 'onHidden' callback.

Not the most efficient way, but I do not have many alerts open.

$(this) is a button in the notification.

Upvotes: 1

Christopher Grigg
Christopher Grigg

Reputation: 2308

If one wants to close the toastr from another event (not just a click)

$('.close-toastr').closest('.toast').remove();

Upvotes: 5

Gokul
Gokul

Reputation: 3231

The answer given by @imjosh works good in normal toastr plugin but not in angular-toastr plugin.

So, I have tried to use jquery remove() method instead of toastr.clear() method as below and it works good.

$('body').on('click', 'a#close-toastr', function () {
    $(this).closest('.toast').remove();
});

Please comment if this way of removing toast produces any issue, but I haven't found any issue with this.

Finally, Thanks @imjosh for giving me the method to find the closest toast.

Upvotes: 4

imjosh
imjosh

Reputation: 4872

toastr.options = {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
    , closeButton: true
    , closeHtml: '<button class="btn" style="background-color: grey; padding: 5px;">OK</button>'
}

toastr.warning("You are warned");
toastr.warning("You are warned 2");

https://jsfiddle.net/3ojp762a/3/

Or, to do it the way you were trying, if you need that for some reason:

toastr.warning("You are warned. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

toastr.warning("You are warned2. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});


$('.close-toastr').on('click', function () {
    toastr.clear($(this).closest('.toast'));
});

https://jsfiddle.net/esgrwznu/

Upvotes: 5

Related Questions