Question

I’m using jGrowl to display messages and alerts, the datepicker I’m using is triggering the .change() function three times in short succession meaning there are three messages being displayed every time you pick a date/time, I’d like to limit this to just one.

I’ve tried $.jGrowl.defaults.pool = 1;but unfortunately this just causes the messages to stack, rather than actually just displaying a single message.

Here’s the code I’m using, at the moment it still displays 3 messages despite the checks in place:

if($('.jGrowl-notification').length == 0) {
    jGrowl('message');
} else {
    if ( $('.jGrowl-notification').not(':visible') ) {
        jGrowl('message');
    }
}

(the first time a message is displayed, the .jGrowl-notification div is created, then when the message times out it is hidden)

Any help would be much appreciated, thank you

Answer 1

Could try something like (untested)

jGrowl('message',{beforeOpen: function() {
    if($('.jGrowl-notification').is(':visible')) {
       return false;
   }
 }
});

jGrowl looks at the return statement of the beforeOpen and beforeClose, returning false stops it continuing.

Another possible way is to keep a record of whether a growl is open for that input like so.

$('#yourPicker').change(function() {
   if($(this).data('hasExisting') == 0) {
    jGrowl('message',{
        open: function() {
                $('#yourPicker').data('hasExisting',1);
        },
        close: function() {
                $('#yourPicker').data('hasExisting',0);
        }
        });
   }
});

This way stores a value in the input to determine if a growl is currently open for it before it tries to queue another.