Extend single toastr creation with optional custom function onclick

Question

I received this message on how to react when a toast is clicked, so I decide to post it here for everyone.

When the user clicks on a toast I don't always want the message to disappear, but depending on the kind of message I want to:

• Disappear.
• Redirect the user to a different page (x es /meetings/210) show a jquery dialog (ex: showing the sms received).

Using the basic click event I'm unable to detect the toast I've clicked. The only workaround I found was to add a link in the toast and do a redirect when the user click on it.

So what I'm asking is a way to get the current toast the user clicks, by using the basic click event (but this may require some more work hiding data in the toast to recover it when clicked to understand what to do), or by adding to the function that creates a toast an optional callback to a function when clicked, something like this:

toastr.error(
'body text', 
'header text', 
click: function() {
console.log('you clicked on the error toaster')
}
);

Thank you for this very nice library.

Answer 1

This is already built it. You can do this 2 ways: you can grab the jQuery object that contains the indiviudal toastr element or you can set the onclick event for the individual toast. Your code is passing in a function for the 3rd parm. The 3rd parm should be the options override. So it should look like this:

toastr.error('body text', 'header text', 
    {onclick: function() {console.log('you clicked on the error toaster')}}
);
toastr.info('body text 1', 'header text', 
    {onclick: function() {console.log('you clicked on the info toaster n.1')}}
);