Attach Function Name To JQuery Dialog Button - jquery-ui

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!