jGrowl and Close Callback to request Ajax?

I have a jQuery / jGrowl question pertaining to how to maintain state of the jGrowls presented. I have a notification system that I've built using PHP/MySQL. That's the easy part. I've managed to get the jGrowls displaying properly.

Now, I'd like to maintain the state of the messages/jGrowls until a user clicks on the "Close" for each individual jGrowl or the "close all" link which closes all jGrowls. I have a users_notifications MySQL table where I can manage which notifications have been "read". I assume the best approach would be to make a getJSON (ajax) request back to the server using the close() or beforeClose() callbacks, but I'm unsure how to write this. I need to pass the notification id back thru the request.

<?php
if (!empty($notifications))
{
    foreach ($notifications as $notification)
    {
?>
        <script>
            <!--
            $(document).ready(function() {
                var notification = <?php echo json_encode($notification); ?>;
                $.jGrowl(notification.message, {
                    beforeClose: function(){
                        var markReadUrl = '<?php echo site_url('notifications/ajax_mark_as_read') ?>' + '/' + notification.id;
                        $.getJSON(markReadUrl, function(data) {
                            console.log(data);
                        });
                    }
                });
            });
            //-->               
        </script>
<?php
    }
}
?>

Update 02/12: I think I found out what was confusing me.

When testing I was using 2 or 3 notification (jGrowls). I was expecting that the beforeClose() callback function would be triggered when the user clicks on an individual jGrowl close link, the 'x' link on the right side of the jGrowl. Is there a callback for the 'x' close? Note, the beforeClose() callback does fire correctly when the user clicks on "close all", and triggers the function for each jGrowl. So, in a way, the "close all" is acting like a "Mark All as Read" link, and the "x" links do nothing. Is this the intended functionality?

Solution

You are correct, you have the choice of two different callbacks you can use 'close' or 'beforeClose'. I would probably choose 'beforeClose' since at this point the notification has been dismissed and will next begin the process of removing it from the page.

So leveraging the callback might look like this:

$.jGrowl('Message here...', {
    beforeClose: function(){
        $.ajax({
            url: '/path/to/dismiss/action',
            success: function(){}
        });
    }
});

If this is something you will use on every notification you can do the following...

$.jGrowl.defaults.beforeClose = function(){
    //...
}

My guess is that you will need to track the notification individually somehow, that way when you make your ajax request to dismiss it you will be passing back the primary key, or something of that sort. One thing I would suggest is using the beforeOpen callback and using the data() method to set a unique identifier for your primary key. That way it's bound when you setup your message and you can reference it later when it's dismissed without having to worry about juggling the information elsewhere.

Hope this helps!