我正在使用AlertifyJS来显示自定义表单并调用以更改多个记录。我已经定义了一个显示对话框的函数：
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();
}
此函数导致问题“alertify.dialog：name already exists”。我刚把对话框声明移到了这个函数之外的document.ready函数，但是我不知道如何传递回调函数：
$(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();
}
谢谢
您需要单独创建对话框以实例化它，如评论中所述，!alertify.customModal && alertify.dialog('customModal'....确保仅创建一次对话框。
这将创建一个单例对话框，因此您需要将回调作为参数传递，无论是在main函数中还是作为设置，然后在模态回调函数中调用它：
!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;
}
}
}
});
然后，调用您的自定义模式：
function showDialog(title, formDialog, callbackfunction, params) {
alertify.customModal($(formDialog)[0], callbackfunction)
.set('title', title); //pass callback function here
}
我只提供了相关部分以便于阅读。