AP.dialog 'submit' and 'cancel' events

Hello everyone

I had the same issue and I will give some more details on how to fix it. In essence, this problem is caused due to the way the modal is created. Below I have added my use-case and the things I did to fix this issue.

I had created a modal dynamically by executing a JavaScript file from a web-panel. This is the JavaScript code executed by the web-panel:

AP.require('dialog', function (dialog) {
   dialog.create({
        key: 'dialog-module-key',
        submitText: "Take the survey",
        cancelText: "Maybe later"
    });
});

The issue is that if you try to handle the events from the same JavaScript file, you won’t be able to do so.

In order to do this, you need to handle the events from a JavaScript file which is loaded by the dialog. This is the code needed to handle the events:

AP.events.on('dialog.button.click', function (data) {
    if (data.button.name === 'submit') {
        // Do something
    }
    else {
        // Do something else
    }
});

It seems that this is the correct way to work with dialogs. I have seen other posts where people have had issues dialogs. However, I have tried other code snippets from the official dialog documentation (Dialog) and all of them work.

For example, if you add this AP.dialog.disableCloseOnSubmit(); in the first JavaScript file (the one which creates the dialog), the dialog will be closed. However, if you add it in the second JavaScript file (the one loaded by the dialog body), the dialog will not be closed when you click on the button.

I hope this helps. Have a nice day :grinning_face_with_smiling_eyes:

1 Like