CODEWITHSUNDEEP
jquerytoastr
phattyD
phattyD

Reputation: 205

Jquery toastr onHidden function

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");

Upvotes: 4

Views: 7827

Answers (3)

aaron lilly
aaron lilly

Reputation: 274

I didn't quite understand these answers, so i am adding my own. I used jquery to create an onclose function, (when someone clicks the toast-close button) like this - 

$('.toast-close-button').click(function() {
*someCodeHere 
});

Upvotes: 0

phattyD
phattyD

Reputation: 205

In case anybody runs across this later here was my solution. Loaded toasts from json. Each toast is inside its own unique div (info, error, warning, succuess) and each has a class assigned to it. I assigned hidden attributes in each message in the toast with values I needed.

$.ajax({
    dataType: "json",
    url: '/announcements/getannouncements/userid/' + userid,
    success: function (data) {
        $.each(data, function (i, val) {
            var mes = '<input type="hidden" id="userId" value="' + userid + '"/>' +
                '<input type="hidden" id="announcementId" value="' + val.id + '"/>' +
                'Client:  ' + val.client + '</br>' + val.announcement;
            var title = val.title;
            toastr.error(mes, title); //info, success, warning, error
        });
    },
    error: function () {
        alert("Could not get announcments");
    }
});

Since closing the toast happens when you click on the div I could capture the div class that was clicked on, find the announcement and user id and preform my logic

//class could be warning, error, info, success : we only use error
$(".toast-error").live('click', function () {
    var userId = $(this).find("#userId").val();
    var announcementId = $(this).find("#announcementId").val();
    var url = '/announcements/acknowledge/userid/' + userId + '/announceid/' + announcementId;
    // ajax call to the controller to write the timestamp of the user clicking the toast announcement
    $.ajax({
        dataType: "json",
        url: url,
        success: function (data) {
            if (data == '1') {
                alert("Successfully acknowledged");
            }
            else {
                alert("Data error");
            }
        },
        error: function () {
        }
    });
});

Upvotes: 0

Matija Grcic
Matija Grcic

Reputation: 13371

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

Upvotes: 8

Related Questions