Hello everyone
I have created this topic not to ask a question, but to post a solution about an issue I found.
I had to open a second dialog when the submit button in the first dialog was pressed. My issue was that if I tried to open the second dialog, both of them would be closed.
Short explanation
The solution was to open the new dialog when the first dialog’s close event is fired. For example:
AP.dialog.create({
key: 'dialog-module-key',
submitText: "Take the survey",
cancelText: "Maybe later"
}).on("close", function() {
// Open new dialog when submit button was pressed
if (sessionStorage.getItem("SUBMIT-PRESSED") === "1") {
console.log('Open new dialog');
AP.dialog.create({
key: 'dialog-module-2-key',
chrome: false
});
}
});
This way, the first dialog will be closed and after that the second dialog will be opened.
Long version
In order to better understand what is going on, I will add more information below.
I have a web-panel which opens a dialog by executing some JavaScript code. This code is displayed above. In order to handle the submit button click event I have to use another JavaScript file which is loaded in the dialog body. (You cannot handle these events in the file which creates the dialog. For more information on that please read this Handle submit and cancel events)
The code which handles the submit event look like this:
AP.events.on('dialog.button.click', function (data) {
if (data.button.name === 'submit') {
// console.log('Open new dialog');
// AP.dialog.create({
// key: 'dialog-module-2-key',
// chrome: false
// });
sessionStorage.setItem("SUBMIT-PRESSED", "1");
} else {
// console.log('Open new dialog');
// AP.dialog.create({
// key: 'dialog-module-2-key',
// chrome: false
// });
sessionStorage.setItem("SUBMIT-PRESSED", "0");
}
});
The commented part will try to open the new dialog when the submit button is pressed. Unfortunately this will not work. Both dialogs will be closed. Adding AP.dialog.disableCloseOnSubmit(); will solve this issue somewhat. Both dialogs will be opened, the second dialog will be on top. However, when closing the second dialog, the first dialog will stay open and the user needs to manually close it.
Here is where my solution comes in. By creating the new dialog inside the first dialog’s close event, the first dialog will be closed without affecting the second dialog. Of course, you need to check which button was pressed. I have done this by adding a new property to the sessionStorage called “SUBMIT-PRESSED”.
Open new dialog when cancel button is pressed
This can be done in a similar way. You only need to listen for the cancel button click event.
AP.dialog.create({
key: 'dialog-module-key',
submitText: "Take the survey",
cancelText: "Maybe later"
}).on("close", function() {
// Open new dialog when cancel button was pressed
if (sessionStorage.getItem("CANCEL-PRESSED") === "1") {
console.log('Open new dialog');
AP.dialog.create({
key: 'dialog-module-2-key',
chrome: false
});
}
});
AP.events.on('dialog.button.click', function (data) {
if (data.button.name === 'cancel') { // look for the cancel button click event
// console.log('Open new dialog');
// AP.dialog.create({
// key: 'dialog-module-2-key',
// chrome: false
// });
sessionStorage.setItem("CANCEL-PRESSED", "1");
}
});
I hope this helps someone in the future
have a nice day 