I am using jquery toastr. So far everything is great. I can display and close toasts fine. I want to be able to identify each toast uniquely. And use that unique identifier in the onHidden function. Has anyone done this before? Is the better option to call a jquery on close event for the toastr class or div surrounding the closed toast?
var mes = 'My name is Inigo Montoya.<input type="hidden" id="announcementId" value="1"/>' +
'<input type="hidden" id="userId" value="'+ userid +'"/> ';
var mes1 = 'Princess Bride<input type="hidden" id="announcementId2" value="2"/>'+
'<input type="hidden" id="userId1" value="'+ userid +'"/> ';
var mes2 = 'Man in Black<input type="hidden" id="announcementId2" value="3"/>'+
'<input type="hidden" id="userId2" value="'+ userid +'"/> ';
var mes3 = 'Inconcivable!<input type="hidden" id="announcementId3" value="4"/>'+
'<input type="hidden" id="userId3" value="'+ userid +'"/> ';
toastr.options = {
"closeButton": false,
"debug": false,
"positionClass": "toast-top-full-width",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "0",
"extendedTimeOut": "0",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.options.onHidden = function(item) {
//GET UNIQUE TOAST ID'S HERE
var val = 1;//$this.find("#announcemntId").val();
alert("CLOSED " + item);
}
toastr.error(mes, "First Toast");
toastr.error(mes1, "Second Toast");
toastr.error(mes2, "Third Toast");
toastr.error(mes3, "Fourth Toast");
You can pass the third parmeter which is the options override
toastr.error('Some error', 'Error', { onHidden: function() {
console.log('Error toast hidden.')
}});
or modify the global onHidden
var onHiddenToast = function () {
console.log("onHidden");
}
toastr.options.onHidden = onHiddenToast;
also you can get the toast simply by referencing it
var myToast = toastr.info("Some info");
//do what you want with myToast
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With