Why does my callback function receive undefined as a parameter value?

Question

I am trying to use the very cool looking Bootstrap Notify plugin, and although it needs quite a lot of DIY styling, works very nicely.

Except, the plugin's main method, $.notify(message, options & settings) offers a settings property for an OnClose callback, when the notification popout (toast) is closed, either naturally or by clicking its Dismiss icon.

The code in the plugin invokes the callback like so:

if ($.isFunction(self.settings.onClose)) {
    self.settings.onClose.call(this.$ele);
}

in its close function, which is called when the user dismisses the alert, or when its delay time elapses and it auto-closes. When I examine the this.$ele value before being passed into the callback call, I see it is a jQuery like object representing an array of one element, ie the alert element busy removing itself from my window. Ei an array containing this element:

<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-minimalist animated fadeInDown fadeOutUp" role="alert" data-notify-position="top-right" data-closing="true" style="display: inline-block; margin: 0px auto; position: fixed; transition: all 0.5s ease-in-out; z-index: 1031; top: 20px; right: 20px;">
    <button type="button" aria-hidden="true" class="close" data-notify="dismiss" style="position: absolute; right: 10px; top: 5px; z-index: 1033;">×</button>
    <span data-notify="icon"></span>
    <span data-notify="title">
    </span> <span data-notify="message">Hey hey hey!</span><a href="#" target="_blank" data-notify="url"></a>
</div>

I use the notify plugin in a very simple test page, like this:

$("button").click(function () {
    $.notify("Hey hey hey!", {
        type: "minimalist",
        delay: 50000,
        onClose: function(element) {
            console.log("Element: " + element);
        }
    });
});

Yet, when this onClose callback is invoked, its element parameter value is undefined . Why does this value become undefined between invoking the callback, and when the callback code is executed?

Answer 1

The code in the plugin:

self.settings.onClose.call(this.$ele);

does not pass any arguments to the onClose() callback. The first argument to .call() is the this pointer that should be set for the callback. Any subsequent arguments for .call() would be the actual arguments to the callback. Since there are none, any that you look for will be undefined .

See MDN doc for .call() for more info.

So, if you want to access the element that is associated with this call, then you can use this inside the callback.

$("button").click(function () {
    $.notify("Hey hey hey!", {
        type: "minimalist",
        delay: 50000,
        onClose: function() {
            console.log(this);
        }
    });
});