Feature request: Add click event for notifications about pnotify HOT 17 CLOSED

I marked this as won't fix because it's pretty easy to accomplish using just standard jQuery. I am going to add this new example to demonstrate how to do it:

<button class="btn source" onclick="var notice = $.pnotify({
    title: 'Click Notice',
    text: 'I wish someone would click me.'
}).click(function(e){
    if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
        return;
    notice.pnotify({type: 'success', text: 'Yay, you clicked me!&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/240px-Happy_smiley_face.png&quot; /&gt;&lt;/div&gt;'});
});">Click Notice</button>

from pnotify.

That. Is Beautiful. Thank you for the code example! I really appreciate it.

from pnotify.

Ok one quick question: Is there any way to reference the $.pnotify object anonymously inside the event handler? The reason I ask is because it is not reasonable to be able to create a separate variable for each notification and keep track of it in my application.

Normally, I would use this or $(this), but in the .click() event handler in your example, this simply refers to the div and I don't have access to the pnotify properties or methods (like .pnotify_remove() for example).

Maybe I'm just missing something really simple. Anyway, I appreciate your help.

from pnotify.

My solution to this:

var aaa = $.pnotify();
aaa.click(function(){
  aaa.pnotify_remove();
});

from pnotify.

@edgardmessias: That won't work for me. In my app, notifications are being created dynamically, and it is not possible for me to assign them to variables and keep track of them. For what I'm suggesting, I really need an anonymous way to access the pnotify object (i.e. via $(this)).

I've made a hack that works in my specific situation, but it's a little ugly in my opinion:

var closeButtonSelector = '.ui-pnotify-closer *';
$.pnotify({
    title: 'Test notification',
    text: 'Click me to dismiss'
}).click(function(e){
    if($(e.target).is(closeButtonSelector + ', .ui-pnotify-sticker *'))
    {
        return;
    }
    var $n = $(this), closer = $n.siblings(closeButtonSelector);
    if(closer.length > 0)
    {
        // The close button is a sibling
        closer.click();
    }
    else
    {
        // The close button is a descendant
        $n.find(closeButtonSelector).click();
    }
});

Anyway, this isn't a deal breaker for me. It's just something that would be nice. Thank you for your work on this great plugin already.

from pnotify.

I hate to say it, but the only way I can find to do this now is this ugly mess:

$.grep($(window).data('pnotify'), function(n){
    return n.is(e.currentTarget);
})[0].pnotify({type: 'success', text: 'blah blah'});

Put that in the click function and it will work. I'll definitely make a better way to do this in the next version.

from pnotify.

Can you wrap the whole thing in an anonymous function?

(function(){
    var notice = $.pnotify({
        title: 'Click Notice',
        text: 'I wish someone would click me.'
    }).click(function(e){
        if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
            return;
        notice.pnotify({type: 'success', text: 'blah blah'});
    });
})();

That way the variable is created only in the anonymous function's scope.

from pnotify.

Genius! Yes, that works. Here's my code which does the same as my previous example with much less code.

(function(){
    var notice = $.pnotify({
        title: 'Test notification',
        text: 'Click me to dismiss'
    }).click(function(e){
        if($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
        {
            return;
        }
        notice.pnotify_remove();
    });
})();

That just feels cleaner and more efficient. Thanks for your help!

from pnotify.

No problem. :)

from pnotify.

Is there any easy method to close notification by click but for all notices by default?

from pnotify.

This is fantastic, thanks. Would be really helpful to promote this on the demo page.

from pnotify.

When one assumes that $.find does not take a long time and pnotify creations should kept short, following code adds the close functionality to all pnotifies:

$(document).on("click", ".ui-pnotify", function(e) {
    if (e.originalEvent === undefined) {
        // hit the second time
        // propagate to pnotify
        return true;
    }
    if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *')) {
        // closer or sticker have been directly clicked, just propagate this event
        return true;
    }
    $(this).find(".ui-pnotify-closer").click();
    return false;
});

from pnotify.

I realize this may have been addressed long ago, but this is how I handled notification closing. I'm using Socket.io to push notifications to the client, and I wanted to notify the server whenever the user closed ('acknowledged') a notification:

    socket.on('notify', function(data) {
        console.log('notify', data);
        notify(data);
    });

        var notify = function(data) {
            var notification = {
                title: data.time,
                text: data.id + ': ' + data.message,
                type: (data.error) ? 'error' : 'success'
            };
            $.pnotify(notification).on('click', function(e) {
                var action = $(e.target).attr('title').toLowerCase();
                notificationClicked(action, data.id);
            });
        };

        var notificationClicked = function(action, id) {
            if(action === 'close') {
                console.log('notification %s acknowledged', id);
                socket.emit('acknowledged', id);
            }
            else if(action === 'stick') {
                //handle pause click, if needed
            }
            else {
                //handle FFU?
            }
        };

from pnotify.

Hello
I try to do the same thing with an array, but it is not working... When I click over the notices they said that notices[i] it is undefined(Firefox) ...

function showNotify (){
for (var i = 0; i < myNotificationList.length; i++) {
notices[i] = $.pnotify({
title: myNotificationList[i]['myTheSuject'],
text: myNotificationList[i]['text'],
type: myNotificationList[i]['type'],
hide: false,
closer: false,
sticker: false
}).attr('id', myNotificationList[i]['id']);
notices[i].click(function (e) {
if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
return;
notices[i].pnotify({
type: 'success',
text: 'Ahhh, Me hiciste click!'
});
});
}
}
};

Could someone tell me what is wrong in the code.

Thank you.

from pnotify.

First, it'd help if you can indent and clean the code. Second, where exactly are you defining the array notices?

from pnotify.

Sorry, this is as it should be:

from pnotify.

Please note that since version 2.1, pnotify_remove() of a PNotify instance is renamed to remove()

from pnotify.