Extension of single toastr creation with optional onclick custom function

Question

I got this message on how to respond when I click toast , so I decided to post it here for everyone.

When the user clicks the toast button, I do not always want the message to disappear, but depending on the type of message I want:

• Disappear.
• Redirect user to another page (x es / meeting / 210) show jquery dialog (for example: show received sms).

Using the main click event, I cannot detect the toast that I clicked. The only workaround I found was to add the link to the toast and redirect when the user clicks on it.

So, I ask how to get the current toast that the user clicks using the main click event (but this may require additional work hiding the data in the toast, to restore it when pressed, in order to understand what to do), or adding to the function, which creates a toast, an optional function callback when pressed, something like this:

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

Thanks for this very nice library.

Answer 1

It is already built. You can do this in two ways: you can capture a jQuery object that contains the individual toastr element, or you can set the onclick event for the individual toast. Your code passes the function to the 3rd parma. The third parm should be canceled. Therefore, 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')}} );