noty Jquery plugin timeout not happening

Question

The Jquery noty plugin timeout is not working when fed with a list of messages. I get the list of messages from servlet and call noty like this.

<script>
    function callNotification()
    {
        <c:foreach var = "message" items = "${sessionScope.notification}">
             notify('${message}');
        </c:foreach>
    }
    function notify(message)
    {
       noty({
                "text": message,
                "theme": noty_theme_facebook",
                "layout": topRight,
                "information","animateOpen":{"height":"toggle"},
                "information","animateOpen":{"height":"toggle"},
                "speed":500,
                "timeout":5000,
                "closeButton":true,
                "closeOnSelfClick":true,
                "closeOnSelfOver":false,
                "modal":false
          })
    </script>

Ideally this should loop over the messages and print them with a timeout of 5000ms. But this prints all of the messages at once. I further tried to use the javascript native setTimeout function and replaced my callNotification with this.

 function callNotification()
    {
        <c:foreach var = "message" items = "${sessionScope.notification}">
         (function(message){ 
            setTimeout(function(){notify('${message}');},5000)
         }('${message}')
        }}
        </c:foreach>
    }

But this also proved ineffective. Strangely the timeout seems to work fine when I replace "layout":center in notify method. Where am I going wrong. I want the messages to be displayed with the time out of 5 seconds after which the first message gets automatically erased and the next shows up.

Solution 1

Noty is coded so that if you have buttons in your Noty, it disables the timeout. That doesn't make sense to me, but that's how it is.

This is the culprit (line 62):

60: // If we have button disable closeWith & timeout options
61: this.options.closeWith = [];
62: this.options.timeout = false;

Just remove this.options.timeout = false; and that will keep the timeout working if you have a Noty with buttons.

Solution 2

To get this working I changed the following in jquery.noty.js ...

self.$bar.delay(self.options.timeout).promise().done(function () {
                self.close();
            });

to this ...

setTimeout(function () {
                self.close();
            }, self.options.timeout);

Solution 3

Try closeWith with timeout option hope it will work fine

   function generate(type, text) {

                var n = noty({
                    text        : text,
                    type        : type,
                    dismissQueue: true,
                    layout      : 'topRight',
                    closeWith   : ['click','timeout'],
                    theme       : 'relax',
                    maxVisible  : 10,
                    timeout     :7000,

                    animation   : {
                        open  : 'animated bounceInRight',
                        close : 'animated bounceOutRight',
                        easing: 'swing',
                        speed : 500
                    }
                });

Solution 4

My answer is for v2.3.7.

Noty returns a javascript object, hence if you check it on firebug by doing console.dir(n), you will find all the methods and properties of the returned object.

Following will set 3 seconds timeout:

var n = noty({text: 'noty - a jquery notification library!'});
n.setTimeout(3000);

View more solutions