Question

I am working on creating a dialog plugin using JQuery Dialog . Below are the parameters which can be passed . It includes button text which user wants to add and call back function name which would be executed on click of that button .

    var settings = $.extend({
        message: 'Your action is successful',
        title: 'Message',
        showButton: true,
        buttonText: 'OK',
        onButtonClick: 'OnButtonClick',
        allowClose: true
    }, options);

I am facing issues to attach that function name to click event of the button . I am trying to do something like below but it throws error .

    $('#dialog-message').dialog({
        buttons: [{
            text: settings.buttonText,
            click: window[settings.onButtonClick]()

        }],
        closeOnEscape: true,
        close: function (e) {
            $(this).empty();
            $(this).dialog('destroy');
    }
    });

Any suggestions How can I attach that Function Name to click event as I only have the function name .

Answer 1

The callers of your plugin should provide a callback for the onButtonClick option rather than a string. Like so:

function OnButtonClick(){
   //does some cool stuff
}

var settings = $.extend({
    message: 'Your action is successful',
    title: 'Message',
    showButton: true,
    buttonText: 'OK',
    onButtonClick: OnButtonClick,
    allowClose: true
}, options);

And then you could bind the incoming function like this:

$('#dialog-message').dialog({
    buttons: [{
        text: settings.buttonText,
        click: settings.onButtonClick
    }],
    closeOnEscape: true,
    close: function (e) {
        $(this).empty();
        $(this).dialog('destroy');
    }
});

This is possible because the onButtonClick variable now holds a reference to the callback that the user of your plugin provided (as opposed to a string) through the settings they used to initialize the plugin.

Hope that helps!