close previous jGrowl notifications before showing a new one

2.2k Views Asked by shaiss At 03 April 2025 at 21:41

I have a simple app that executes $.jGrowl("loading");. Then the data is displayed $.jGrowl("blah blah blah data goes here"); after crunching data which can take 1 -5 seconds.

I've seen a post that mentions using the default.pool to only display one message at a time. The format I want is:

Show box 1
crunch data
close box 1
show box 2

Is there a jGrowl function that can be initiated to close all notifications?

UPDATE
according to the source example you can do the folowing
$('#loading').jGrowl('<img src="images/loading.gif" alt="Loading..." />');
then call to close it
$('#loading').jGrowl('shutdown');
<div id="loading" class="top-right"></div> that does hide the loading growl, however it also hide subsequent notifications in that region.

Original Q&A

There are 2 best solutions below

Aroniaina On 21 December 2016 at 11:49

You can find all notification with $(".jGrowl-notification").each, trigger the close fonction with .trigger('jGrowl.beforeClose'), and create your new growl, like below :

$(".jGrowl-notification").each(function () {
    if ($(this).data("jGrowl") !== undefined && $(this).data("jGrowl").created !== undefined) {
        $(this).data("jGrowl").trigger('jGrowl.beforeClose');
    }
});
$.jGrowl("NEW MESSAGE");

shaiss On 11 November 2009 at 20:54

$('#loadinggrowl').jGrowl('<img src="images/loading.gif" alt="Loading..." />');
$.jGrowl('content here');
document.getElementById('loadinggrowl').style.display = "none";

<body><div id="loading" class="top-right"></div></body>

Line 3 above hides the loadinggrowl div after loading the content.

this may not be the best way, but it works.

close previous jGrowl notifications before showing a new one

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in NOTIFICATIONS

Related Questions in JGROWL

Trending Questions

Popular # Hahtags

Popular Questions