How to assign ID to toastr.js notification and update it as needed

问题

In my project I need to keep notification open unless user clicks on it and if there is an update in the time between it was triggerred and the user clicks on it, i need to update the value on the toast notificaiton.

I don't find any reference on how can i update a notification. Does anyone know ?

i'm using this github repo : toastr.js

please suggest

回答1:

You can keep the toast open indefinitely by setting a timeOut value of 0 on the global scope using toast.options.

Alternately, you can set it using the third argument of the toast method.

For example:

toastr.success("message body", "title", {timeOut:0})

For your second question, you can update an existing toast by capturing it's reference when it's created, and then mutating it after creation.

For example:

var myToast = toastr.success("message body", "title", {timeOut:0});
myToast.find(".toast-title").text("new title");
myToast.find(".toast-message").text("new message");

You may also want to set the extendedTimeOut to 0 too, in case the user hovers over the toast before you've finished with it, like so:

var myToast = toastr.success("message body", "title", {timeOut:0, extendedTimeOut:0});

Then when you're done you can hide the toast programmatically:

$(myToast).fadeOut();

回答2:

There is a easy solution like this-

toastr.options.timeOut = 0;

Demo Code-

$(function() {

    function Toast(type, css, msg) {
        this.type = type;
        this.css = css;
        this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.';
    }

    var toasts = [
        new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'),
        new Toast('info', 'toast-top-full-width', 'top full width'),
        new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'),
        new Toast('success', 'toast-top-right', 'top right'),
        new Toast('warning', 'toast-bottom-right', 'bottom right'),
        new Toast('error', 'toast-bottom-left', 'bottom left')
    ];

    toastr.options.positionClass = 'toast-top-full-width';
    toastr.options.extendedTimeOut = 0; //1000;
    toastr.options.timeOut = 0;
    toastr.options.fadeOut = 250;
    toastr.options.fadeIn = 250;

    var i = 0;

    $('#tryMe').click(function () {
        $('#tryMe').prop('disabled', true);
        delayToasts();
    });

    function delayToasts() {
        if (i === toasts.length) { return; }
        var delay = i === 0 ? 0 : 2100;
        window.setTimeout(function () { showToast(); }, delay);

        // re-enable the button        
        if (i === toasts.length-1) {
            window.setTimeout(function () {
                $('#tryMe').prop('disabled', false);
                i = 0;
            }, delay + 1000);
        }
    }

    function showToast() {
        var t = toasts[i];
        toastr.options.positionClass = t.css;
        toastr[t.type](t.msg);
        i++;
        delayToasts();
    }
})

body {
    margin: 5em;
}
li {
    font-size: 18px;
    padding: 4px;
}

#toast-container > .toast {
    background-image: none !important;
}

#toast-container > .toast:before {
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    line-height: 18px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}        
#toast-container > .toast-warning:before {
    content: "\f003";
}
#toast-container > .toast-error:before {
    content: "\f001";
}
#toast-container > .toast-info:before {
    content: "\f005";
}
#toast-container > .toast-success:before {
    content: "\f002";
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />

</head>
    <body>
        <h1>Toastr with FontAwesome Icons</h1>
        <ul class="icons-ul">
            <li><i class="icon-li icon-ok"></i>Embedded icon using the &lt;i&gt; tag</li>
            <li><i class="icon-li icon-ok"></i>Doesn't work with background-image</li>
            <li><i class="icon-li icon-ok"></i>We can use the :before psuedo class</li>
            <li><i class="icon-li icon-ok"></i>Works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers</li>
            <li><i class="icon-li icon-ok"></i>See <a href="http://caniuse.com/#search=before">CanIUse.com</a> for browser support</li>
        </ul>
        <button class="btn btn-primary" id="tryMe">Try Me</button>        
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

回答3:

I needed to identify my toastr and I found a solution:

    toastr["error"]("Message", "Alert", {
        own_id: 666,
        onCloseClick: function(a, b) {
            // here you can update notification identified by own_id
            console.log(this.own_id);
        }
    })

回答4:

I assume you have a unique id for each toast. This will do the job:

var t = toastr.warning("message", "title");
t.attr('id', 'your unique id');

Afterwards you can select each toastr simply like this:

t = $('#id')

来源：https://stackoverflow.com/questions/30403632/how-to-assign-id-to-toastr-js-notification-and-update-it-as-needed

标签

javascript

toastr