I am using AlertifyJS to show custom form and make call to alter multiple records. I have defined a function to show dialog:
function showDialog(title, formDialog, callbackfunction, params) {
alertify.dialog('customModal', function factory() {
var placeholder = null
return {
main: function (content) {
if (content instanceof HTMLElement && content.parentNode) {
placeholder = placeholder || document.createComment('')
content.parentNode.insertBefore(placeholder, content)
}
this.setContent(content);
},
setup: function () {
return {
/* buttons collection */
buttons: [
/*button defintion*/
{
/* button label */
text: 'OK',
/*bind a keyboard key to the button */
key: 27,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.ok,
/* custom button attributes */
//attrs: { buttonValue: 'submit' },
/* Defines the button scope, either primary (default) or auxiliary */
scope: 'auxiliary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
},
{
/* button label */
text: 'Cancel',
/*bind a keyboard key to the button */
//key: 27,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.cancel,
/* custom button attributes */
//attrs: { buttonValue: 'submit' },
/* Defines the button scope, either primary (default) or auxiliary */
scope: 'auxiliary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
}
],
options: {
basic: false,
maximizable: false,
resizable: false,
padding: false,
closableByDimmer: false,
title: 'My custom dialog'
}
};
},
callback: function (closeEvent) {
//The closeEvent has the following properties
//
// index: The index of the button triggering the event.
// button: The button definition object.
// cancel: When set true, prevent the dialog from closing.
console.log(closeEvent);
if (closeEvent.index == 0) { //OK Button
callbackfunction(params);
}
},
hooks: {
onclose: function () {
if (placeholder != null) {
var node = this.elements.content.firstElementChild
node.style.display = 'none'
placeholder.parentNode.insertBefore(node, placeholder)
}
}
}
};
});
alertify.customModal($(formDialog)[0]).set('title', title);
$(formDialog).show();
}
This function causes problem stating "alertify.dialog: name already exists". I just moved the dialog declaration to a document.ready function outside this function, but I don't know how can I pass callback function:
$(document).ready(function () {
alertify.dialog('customModal', function factory() {
var placeholder = null
return {
main: function (content) {
if (content instanceof HTMLElement && content.parentNode) {
placeholder = placeholder || document.createComment('')
content.parentNode.insertBefore(placeholder, content)
}
this.setContent(content);
},
setup: function () {
return {
/* buttons collection */
buttons: [
/*button defintion*/
{
/* button label */
text: 'OK',
/*bind a keyboard key to the button */
key: 27,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.ok,
/* custom button attributes */
//attrs: { buttonValue: 'submit' },
/* Defines the button scope, either primary (default) or auxiliary */
scope: 'auxiliary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
},
{
/* button label */
text: 'Cancel',
/*bind a keyboard key to the button */
//key: 27,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.cancel,
/* custom button attributes */
//attrs: { buttonValue: 'submit' },
/* Defines the button scope, either primary (default) or auxiliary */
scope: 'auxiliary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
}
],
options: {
basic: false,
maximizable: false,
resizable: false,
padding: false,
closableByDimmer: false,
title: 'My custom dialog'
}
};
},
callback: function (closeEvent) {
//The closeEvent has the following properties
//
// index: The index of the button triggering the event.
// button: The button definition object.
// cancel: When set true, prevent the dialog from closing.
console.log(closeEvent);
if (closeEvent.index == 0) { //OK Button
callbackfunction(params);
}
},
hooks: {
onclose: function () {
if (placeholder != null) {
var node = this.elements.content.firstElementChild
node.style.display = 'none'
placeholder.parentNode.insertBefore(node, placeholder)
}
}
}
};
});
});
function showDialog(title, formDialog, callbackfunction, params) {
alertify.customModal($(formDialog)[0]).set('title', title); //pass callback function here
$(formDialog).show();
}
Thanks
You need to separate creating the dialog from instantiating it, as mentioned in the comments !alertify.customModal && alertify.dialog('customModal'.... ensures the dialog is created only once.
This will create a singleton dialog, so you need to pass in the callback as a parameter, either in main function or as a settings, Then invoke it in the modal callback function:
!alertify.customModal && alertify.dialog('customModal', function factory() {
var placeholder = null
return {
main: function (content, callback) {
....
//sets callback
this.set('callback', callback);
},
settings: {
....,
callback:undefined //holds callback ref
},
callback: function (closeEvent) {
//invokes callback if set
var cb = this.get('callback')
if (typeof cb === 'function') {
var returnValue = cb.call(this, closeEvent);
if (typeof returnValue !== 'undefined') {
closeEvent.cancel = !returnValue;
}
}
}
});
Then, call your custom modal:
function showDialog(title, formDialog, callbackfunction, params) {
alertify.customModal($(formDialog)[0], callbackfunction)
.set('title', title); //pass callback function here
}
I only included the relevant parts for readability.
For a complete example, Take a look at the built-in dialogs implementation: Alert, Confirm and Prompt.