1

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

Yasser Sobhdel
  • 611
  • 8
  • 26
  • 1
    it's enough to add if(!alertify.customModal){ before alertify.dialog('customModal'.... – gaetanoM Feb 21 '19 at 14:30
  • Thanks for your quick comment, but how about multiple callback functions? In this case, the first callback will be held regardless of the parameter. – Yasser Sobhdel Feb 21 '19 at 17:03
  • I just tested destroying the modal using setTimeout((function () { alertify.customModal().destroy(); }), 400); at the end of onclose to no avail. it just keeps calling the same callback function – Yasser Sobhdel Feb 21 '19 at 17:48

1 Answers1

2

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.

MK.
  • 5,139
  • 1
  • 22
  • 36