Detect display or loading of pnotify with a jquery selector

Question

I am writing an extension to an application which uses pnotify version 1.2.0. The core application creates a pnotfy alert and I want my code to react to the creation of that alert. This is a proprietary extension framework, it allows me to add my own JS and that JS is loaded after the main applications own JS is loaded. That extension model is relevant only in that it means I can't just do something sane like modify the original calling code; I have to react to secondary events.

I have tried doing this with jquery and the load event like this:

$('div.ui-pnotify-text').on('load', function() {
    console.log('detected pnotify creation, doing stuff...');
});

I have tried the following selectors:

• div.ui-pnotify-container
• div.ui-pnotify-text

These selectors work after the pnotify bubble pops up but the load event doesn't seem to fire. I suspect that either I am using the wrong selector or I have misunderstood the jQuery event model.

I also looked at the pnotify_remove_all method which shows that I can use $(window).data("pnotify") to get a list of all active pnotify objects. Like the selectors, this works in the browser console after everything has loaded but not from JS code.

How can I reliably detect the creation of a pnotify bubble using jquery?

If not jquery, is there some built-in pnotify mechanism I can use?

Answer 1

var notice = new PNotify({
     title: 'Mesaj',
     text: '<p>' + item.Message + '</p>',
     hide: false,
     width: '220px',
     addclass: "notice_" + item.Id,
     type: 'success'
});

When pnotify is active, you can access it with the code below. You can find the pop-up message by giving addclass a name to call yourself.

if ($(".notice_" + item.Id).length == 0) {
 ...
}
 

My English is not very good. I'm sorry. I hope I didn't get the problem wrong.