Question

I am using a jQuery plugin for showing notifications.

so i can use something like this

show_notification("Successfully Saved your data","success");

we can use html content as message.

Now i want to perform some actions

ex.

show_notification("Do you want to save your data","success");

so this is a question to the user and user need to reply by clicking yes or no [both will be passed as html message]

what i need to do is when user clicks on yes/no i need to perform some actions.

i can use id or class to attach a click event,but i have many types of actions,and need to use very different id or class.

can i use a call back function or something like that ?

Please help me or give me your valuable suggestions .

Thank you.

Note : I know that it is not possible with current plugin and not talking about its functionalities ,i am just trying to modify the plugin.

Answer 1

In case there is no way to send a callback to your plugin, you would have to manually add the Yes/No-buttons to your message, and target them either by live delegates or by assigning a listener after the notification has been shown.

$(function() {

    $('body').on('click', '.notification-yes', function() {
       // yes-callback
    });

    $('body').on('click', '.notification-no', function() {
       // no-callback
    });

});

show_notification('Do you want to proceed? <button class="notification-yes">Yes</button> <button class="notification-no">No</button>', 'success');

If it is this plugin that you’re using, you’ll want your listeners to call closeNotification(). I realize that the syntax is not exactly the same, but that could be a versioning issue. It’d be easier to help you with the specifics if we knew the details of the plugin you’re using.

You’ll also need a way of knowing which notification was showing when the button was clicked. You could of course have unique button class names for different notifications. Another approach, if there is always just one notification showing at any given time, would be to have a small state object for the callback of interest. For instance:

var myNotifications = {
    onYes: function() { },
    onNo: function() { }
};

$(function() {
    $('body').on('click', '.notification-yes', function() {
       myNotifications.onYes();
       closeNotification();
    });

    $('body').on('click', '.notification-no', function() {
       myNotifications.onNo();
       closeNotification();
    });
});

function showCertainNotification() {
    myNotifications.onYes = function() {
        // specific callback for this notification.
    };

    show_notification('Confirm? <button class="notification-yes">Yes</button> <button class="notification-no">No</button>', 'success');
}

If there could be several notifications showing at any one time, a simple variable like that won’t do. In that case you’d have to wrap your message in a container, the ID of which you could extract from your listener, and call a specific callback based on that, or passing that as a parameter. I won’t go into detail here, seeing as the simple nature of show_notification implies an equally simple manner of close_notification. Since no ID’s seems to be anywhere to be found, I’ll assume that multiple active notifications are not supported.

A more appealing solution might have been to modify the plugin itself, rather than to work around it, so that you could pass callback functions directly to the plugin. Something like this:

show_notification({
    message: 'Confirm',
    type: 'success',
    buttons: [
        { caption: 'Yes', click: function() { } },
        { caption: 'No',  click: function() { } }
    ]
});

But of course, this is no way near possible to help you with, without first having a chance to look at what the plugin you’re currently using looks like.