From 6e51fbb84dfc54137314278b3614efa7159753a0 Mon Sep 17 00:00:00 2001
From: emanuele-f <faranda@ntop.org>
Date: Mon, 18 May 2020 19:15:11 +0200
Subject: [PATCH] Only initialize the modals once

This prevents multiple events rebindings
---
 httpdocs/js/pages/datasource_list.js          | 161 +++++++++---------
 .../js/pages/endpoint-notifications-list.js   | 119 ++++++-------
 httpdocs/js/pages/recipients-endpoints.js     | 110 ++++++------
 httpdocs/js/pages/widget_list.js              | 132 +++++++-------
 httpdocs/js/utils/modal-utils.js              |  59 ++++---
 5 files changed, 303 insertions(+), 278 deletions(-)

diff --git a/httpdocs/js/pages/datasource_list.js b/httpdocs/js/pages/datasource_list.js
index fd5f8c7712..39a7a361ee 100644
--- a/httpdocs/js/pages/datasource_list.js
+++ b/httpdocs/js/pages/datasource_list.js
@@ -310,67 +310,69 @@ $(document).ready(function () {
         return serialized;
     }
 
-    /* bind edit datasource event */
-    $(`#datasources-list`).on('click', `a[href='#edit-datasource-modal']`, function (e) {
+    let rowData = null;
 
-        const rowData = $datasources_table.row($(this).parent()).data();
+    const edit_datasource_modal = $('#edit-datasource-modal form').modalHandler({
+        method: 'post',
+        endpoint: `${http_prefix}/lua/edit_datasources.lua`,
+        beforeSumbit: function () {
+            return {
+                action: 'edit',
+                JSON: JSON.stringify(prepareFormData(`#edit-datasource-modal form`))
+            };
+        },
+        loadFormData: function() {
+            return rowData;
+        },
+        onModalInit: function(data) {
 
-        $('#edit-datasource-modal form').modalHandler({
-            method: 'post',
-            endpoint: `${http_prefix}/lua/edit_datasources.lua`,
-            beforeSumbit: function () {
-                return {
-                    action: 'edit',
-                    JSON: JSON.stringify(prepareFormData(`#edit-datasource-modal form`))
-                };
-            },
-            loadFormData: function() {
-                return rowData;
-            },
-            onModalInit: function(data) {
+            /* fill default datasource values */
+            $(`#edit-datasource-modal form`).find('[name]').each(function(e) {
+                $(this).val(data[$(this).attr('name')]);
+            });
 
-                /* fill default datasource values */
-                $(`#edit-datasource-modal form`).find('[name]').each(function(e) {
-                    $(this).val(data[$(this).attr('name')]);
+            const $sourcesContainer = $(`#edit-datasource-modal .ds-source-container`);
+            const $btnAddSource = $(`#edit-datasource-modal .btn-add-source`);
+            $btnAddSource.hide();
+            $sourcesContainer.hide().empty();
+
+            /* if the origin is of type timeseries then prepare sources */
+            if (data.origin != "timeseries.lua") return;
+
+            const schemas = data.schemas;
+            for (const [key, schema] of Object.entries(schemas)) {
+
+                const source = timeseriesSourceBuilder.buildNewSource(
+                    `#edit-ds-source-container`,
+                    `source-${data.hash}-${schema.metric}`
+                );
+
+                source.setCardTitle(`${key} / ${schema.metric}`);
+                source.fillSource({
+                    schema: key,
+                    metric: schema.metric,
+                    tags: schema.tags
                 });
 
-                const $sourcesContainer = $(`#edit-datasource-modal .ds-source-container`);
-                const $btnAddSource = $(`#edit-datasource-modal .btn-add-source`);
-                $btnAddSource.hide();
-                $sourcesContainer.hide().empty();
-
-                /* if the origin is of type timeseries then prepare sources */
-                if (data.origin != "timeseries.lua") return;
-
-                const schemas = data.schemas;
-                for (const [key, schema] of Object.entries(schemas)) {
-
-                    const source = timeseriesSourceBuilder.buildNewSource(
-                        `#edit-ds-source-container`,
-                        `source-${data.hash}-${schema.metric}`
-                    );
-
-                    source.setCardTitle(`${key} / ${schema.metric}`);
-                    source.fillSource({
-                        schema: key,
-                        metric: schema.metric,
-                        tags: schema.tags
-                    });
-
-                    $sourcesContainer.append(source.$domElement);
-                }
-
-                $sourcesContainer.show();
-                $btnAddSource.show();
-            },
-            onSubmitSuccess: function(response) {
-                if (response.success) {
-                    $datasources_table.ajax.reload();
-                    timeseriesSourceBuilder.emptyCurrentSources();
-                    $('#edit-datasource-modal').modal('hide');
-                }
+                $sourcesContainer.append(source.$domElement);
             }
-        });
+
+            $sourcesContainer.show();
+            $btnAddSource.show();
+        },
+        onSubmitSuccess: function(response) {
+            if (response.success) {
+                $datasources_table.ajax.reload();
+                timeseriesSourceBuilder.emptyCurrentSources();
+                $('#edit-datasource-modal').modal('hide');
+            }
+        }
+    });
+
+    /* bind edit datasource event */
+    $(`#datasources-list`).on('click', `a[href='#edit-datasource-modal']`, function (e) {
+        rowData = $datasources_table.row($(this).parent()).data();
+        edit_datasource_modal.invokeModalInit();
     });
 
     /* bind add datasource event */
@@ -392,33 +394,36 @@ $(document).ready(function () {
                 $datasources_table.ajax.reload();
             }
         }
+    }).invokeModalInit();
+
+    let dsRowData = null;
+
+    const remove_ds_modal = $(`#remove-datasource-modal form`).modalHandler({
+        method: 'post',
+        endpoint: `${http_prefix}/lua/edit_datasources.lua`,
+        skipAys: true,
+        beforeSumbit: () => {
+            return {
+                action: 'remove',
+                JSON: JSON.stringify({
+                    ds_key: $(`#remove-datasource-modal form input[name='ds_key']`).val()
+                })
+            }
+        },
+        loadFormData: () => dsRowData.hash,
+        onModalInit: function (data) {
+            $(`#remove-datasource-modal form input[name='ds_key']`).val(data);
+        },
+        onSubmitSuccess: function (response) {
+            $datasources_table.ajax.reload();
+            $('#remove-datasource-modal').modal('hide');
+        }
     });
 
     /* bind remove datasource event */
     $(`#datasources-list`).on('click', `a[href='#remove-datasource-modal']`, function (e) {
-
-        const rowData = $datasources_table.row($(this).parent()).data();
-
-        $(`#remove-datasource-modal form`).modalHandler({
-            method: 'post',
-            endpoint: `${http_prefix}/lua/edit_datasources.lua`,
-            beforeSumbit: () => {
-                return {
-                    action: 'remove',
-                    JSON: JSON.stringify({
-                        ds_key: $(`#remove-datasource-modal form input[name='ds_key']`).val()
-                    })
-                }
-            },
-            loadFormData: () => rowData.hash,
-            onModalInit: function (data) {
-                $(`#remove-datasource-modal form input[name='ds_key']`).val(data);
-            },
-            onSubmitSuccess: function (response) {
-                $datasources_table.ajax.reload();
-                $('#remove-datasource-modal').modal('hide');
-            }
-        });
+        dsRowData = $datasources_table.row($(this).parent()).data();
+        remove_ds_modal.invokeModalInit();
     });
 
     /* **************************************************************************************** */
diff --git a/httpdocs/js/pages/endpoint-notifications-list.js b/httpdocs/js/pages/endpoint-notifications-list.js
index 4ab35e239a..5b14066e2d 100644
--- a/httpdocs/js/pages/endpoint-notifications-list.js
+++ b/httpdocs/js/pages/endpoint-notifications-list.js
@@ -89,40 +89,42 @@ $(document).ready(function () {
         ]
     });
 
+    let rowData = null;
+
+    const edit_endpoint_modal = $('#edit-endpoint-modal form').modalHandler({
+        method: 'post',
+        csrf: csrf,
+        endpoint: `${http_prefix}/lua/edit_endpoint.lua`,
+        beforeSumbit: function () {
+            const body = makeFormData(`#edit-endpoint-modal form`);
+            body.action = 'edit';
+            return body;
+        },
+        loadFormData: function () {
+            return rowData;
+        },
+        onModalInit: function (data) {
+            /* load the right template from templates */
+            $(`#edit-endpoint-modal form .endpoint-template-container`)
+                .empty().append(loadTemplate(data.endpoint_key));
+            /* load the values inside the template */
+            $(`#edit-endpoint-modal form [name='name']`).val(data.endpoint_conf_name);
+            $(`#edit-endpoint-modal form .endpoint-template-container [name]`).each(function(i, input) {
+                $(this).val(data.endpoint_conf[$(this).attr('name')]);
+            });
+        },
+        onSubmitSuccess: function (response) {
+            if (response.result.status == "OK") {
+                $(`#edit-endpoint-modal`).modal('hide');
+                $endpointsTable.ajax.reload();
+            }
+        }
+    });
+
     /* bind edit endpoint event */
     $(`table#notification-list`).on('click', `a[href='#edit-endpoint-modal']`, function (e) {
-
-        const rowData = $endpointsTable.row($(this).parent()).data();
-
-        $('#edit-endpoint-modal form').modalHandler({
-            method: 'post',
-            csrf: csrf,
-            endpoint: `${http_prefix}/lua/edit_endpoint.lua`,
-            beforeSumbit: function () {
-                const body = makeFormData(`#edit-endpoint-modal form`);
-                body.action = 'edit';
-                return body;
-            },
-            loadFormData: function () {
-                return rowData;
-            },
-            onModalInit: function (data) {
-                /* load the right template from templates */
-                $(`#edit-endpoint-modal form .endpoint-template-container`)
-                    .empty().append(loadTemplate(data.endpoint_key));
-                /* load the values inside the template */
-                $(`#edit-endpoint-modal form [name='name']`).val(data.endpoint_conf_name);
-                $(`#edit-endpoint-modal form .endpoint-template-container [name]`).each(function(i, input) {
-                    $(this).val(data.endpoint_conf[$(this).attr('name')]);
-                });
-            },
-            onSubmitSuccess: function (response) {
-                if (response.result.status == "OK") {
-                    $(`#edit-endpoint-modal`).modal('hide');
-                    $endpointsTable.ajax.reload();
-                }
-            }
-        });
+        rowData = $endpointsTable.row($(this).parent()).data();
+        edit_endpoint_modal.invokeModalInit();
     });
 
     /* bind add endpoint event */
@@ -160,35 +162,38 @@ $(document).ready(function () {
             }
 
         }
+    }).invokeModalInit();
+
+    let removeModalData = null;
+
+    const remove_endpoint_modal = $(`#remove-endpoint-modal form`).modalHandler({
+        method: 'post',
+        csrf: csrf,
+        skipAys: true,
+        endpoint: `${http_prefix}/lua/edit_endpoint.lua`,
+        beforeSumbit: () => {
+            return {
+                action: 'remove',
+                endpoint_conf_name: $(`#remove-endpoint-modal form [name='endpoint_conf_name']`).val()
+            };
+        },
+        loadFormData: () => removeModalData.endpoint_conf_name,
+        onModalInit: function (data) {
+            $(`#remove-endpoint-modal form [name='endpoint_conf_name']`).val(data);
+        },
+        onSubmitSuccess: function (response) {
+            if (response.result.status == "OK") {
+                $(`#remove-endpoint-modal`).modal('hide');
+                $endpointsTable.ajax.reload();
+            }
+        }
     });
 
     /* bind remove endpoint event */
     $(`table#notification-list`).on('click', `a[href='#remove-endpoint-modal']`, function (e) {
-
-        const rowData = $endpointsTable.row($(this).parent()).data();
-
-        $(`#remove-endpoint-modal form`).modalHandler({
-            method: 'post',
-            csrf: csrf,
-            endpoint: `${http_prefix}/lua/edit_endpoint.lua`,
-            beforeSumbit: () => {
-                return {
-                    action: 'remove',
-                    endpoint_conf_name: $(`#remove-endpoint-modal form [name='endpoint_conf_name']`).val()
-                };
-            },
-            loadFormData: () => rowData.endpoint_conf_name,
-            onModalInit: function (data) {
-                $(`#remove-endpoint-modal form [name='endpoint_conf_name']`).val(data);
-            },
-            onSubmitSuccess: function (response) {
-                if (response.result.status == "OK") {
-                    $(`#remove-endpoint-modal`).modal('hide');
-                    $endpointsTable.ajax.reload();
-                }
-            }
-        });
+        removeModalData = $endpointsTable.row($(this).parent()).data();
+        remove_endpoint_modal.invokeModalInit();
     });
 
 
-});
\ No newline at end of file
+});
diff --git a/httpdocs/js/pages/recipients-endpoints.js b/httpdocs/js/pages/recipients-endpoints.js
index d61856a826..fab959b995 100644
--- a/httpdocs/js/pages/recipients-endpoints.js
+++ b/httpdocs/js/pages/recipients-endpoints.js
@@ -91,40 +91,42 @@ $(document).ready(function () {
         ]
     });
 
+    let cur_row_data = null;
+
+    const edit_recipient_modal = $('#edit-recipient-modal form').modalHandler({
+        method: 'post',
+        csrf: pageCsrf,
+        endpoint: `${http_prefix}/lua/edit_notification_recipient.lua`,
+        beforeSumbit: function () {
+            const data = makeFormData(`#edit-recipient-modal form`);
+            data.action = 'edit';
+            return data;
+        },
+        loadFormData: function () {
+            return cur_row_data;
+        },
+        onModalInit: function (data) {
+            /* load the right template from templates */
+            $(`#edit-recipient-modal form .recipient-template-container`)
+                .empty().append(loadTemplate(data.endpoint_conf.endpoint_key));
+            /* load the values inside the template */
+            $(`#edit-recipient-modal form [name='name']`).val(data.recipient_name);
+            $(`#edit-recipient-modal form .recipient-template-container [name]`).each(function(i, input) {
+                $(this).val(data.recipient_params[$(this).attr('name')]);
+            });
+        },
+        onSubmitSuccess: function (response) {
+            if (response.result.status == "OK") {
+                $(`#edit-recipient-modal`).modal('hide');
+                $recipientsTable.ajax.reload();
+            }
+        }
+    });
+
     /* bind edit recipient event */
     $(`table#recipient-list`).on('click', `a[href='#edit-recipient-modal']`, function (e) {
-
-        const rowData = $recipientsTable.row($(this).parent()).data();
-
-        $('#edit-recipient-modal form').modalHandler({
-            method: 'post',
-            csrf: pageCsrf,
-            endpoint: `${http_prefix}/lua/edit_notification_recipient.lua`,
-            beforeSumbit: function () {
-                const data = makeFormData(`#edit-recipient-modal form`);
-                data.action = 'edit';
-                return data;
-            },
-            loadFormData: function () {
-                return rowData;
-            },
-            onModalInit: function (data) {
-                /* load the right template from templates */
-                $(`#edit-recipient-modal form .recipient-template-container`)
-                    .empty().append(loadTemplate(data.endpoint_conf.endpoint_key));
-                /* load the values inside the template */
-                $(`#edit-recipient-modal form [name='name']`).val(data.recipient_name);
-                $(`#edit-recipient-modal form .recipient-template-container [name]`).each(function(i, input) {
-                    $(this).val(data.recipient_params[$(this).attr('name')]);
-                });
-            },
-            onSubmitSuccess: function (response) {
-                if (response.result.status == "OK") {
-                    $(`#edit-recipient-modal`).modal('hide');
-                    $recipientsTable.ajax.reload();
-                }
-            }
-        });
+        cur_row_data = $recipientsTable.row($(this).parent()).data();
+        edit_recipient_modal.invokeModalInit();
     });
 
     /* bind add endpoint event */
@@ -160,31 +162,35 @@ $(document).ready(function () {
                 $(`#add-recipient-modal form span.invalid-feedback`).text(localizedString).show();
             }
         }
+    }).invokeModalInit();
+
+    let rowData = null;
+
+    const recipients_list = $(`#remove-recipient-modal form`).modalHandler({
+        method: 'post',
+        csrf: pageCsrf,
+        endpoint: `${http_prefix}/lua/edit_notification_recipient.lua`,
+        skipAys: true,
+        beforeSumbit: () => {
+            return {
+                action: 'remove',
+                recipient_name: rowData.recipient_name
+            }
+        },
+        onSubmitSuccess: function (response) {
+            if (response.result.status == "OK") {
+                $(`#remove-recipient-modal`).modal('hide');
+                $recipientsTable.ajax.reload();
+            }
+        }
     });
 
     /* bind remove endpoint event */
     $(`table#recipient-list`).on('click', `a[href='#remove-recipient-modal']`, function (e) {
+        rowData = $recipientsTable.row($(this).parent()).data();
 
-        const rowData = $recipientsTable.row($(this).parent()).data();
-
-        $(`#remove-recipient-modal form`).modalHandler({
-            method: 'post',
-            csrf: pageCsrf,
-            endpoint: `${http_prefix}/lua/edit_notification_recipient.lua`,
-            beforeSumbit: () => {
-                return {
-                    action: 'remove',
-                    recipient_name: rowData.recipient_name
-                }
-            },
-            onSubmitSuccess: function (response) {
-                if (response.result.status == "OK") {
-                    $(`#remove-recipient-modal`).modal('hide');
-                    $recipientsTable.ajax.reload();
-                }
-            }
-        });
+        recipients_list.invokeModalInit();
     });
 
 
-});
\ No newline at end of file
+});
diff --git a/httpdocs/js/pages/widget_list.js b/httpdocs/js/pages/widget_list.js
index dee2846142..5d36cbf143 100644
--- a/httpdocs/js/pages/widget_list.js
+++ b/httpdocs/js/pages/widget_list.js
@@ -80,73 +80,77 @@ $(document).ready(function() {
         `);
     });
 
-    $(`#widgets-list`).on('click', `a[href='#remove-widget-modal']`, function(e) {
+    let removeWRowData = null;
 
-        const rowData = $widgets_table.row($(this).parent()).data();
-
-        $(`#remove-widget-modal form`).modalHandler({
-            method: 'post',
-            endpoint: `${http_prefix}/lua/edit_widgets.lua`,
-            csrf: remove_csrf,
-            beforeSumbit: () => {
-                return {
-                    action: 'remove',
-                    JSON: JSON.stringify({
-                        widget_key: rowData.key
-                    })
-                };
-            },
-            onModalInit: function(data) {
-                $(`#remove-widget-modal form input[name='widget_key']`).val(data);
-            },
-            onSubmitSuccess: function(response) {
-                if (response.success) {
-                    $widgets_table.ajax.reload();
-                    $('#remove-widget-modal').modal('hide');
-                }
+    const remove_widget_modal = $(`#remove-widget-modal form`).modalHandler({
+        method: 'post',
+        endpoint: `${http_prefix}/lua/edit_widgets.lua`,
+        csrf: remove_csrf,
+        skipAys: true,
+        beforeSumbit: () => {
+            return {
+                action: 'remove',
+                JSON: JSON.stringify({
+                    widget_key: removeWRowData.key
+                })
+            };
+        },
+        onModalInit: function(data) {
+            $(`#remove-widget-modal form input[name='widget_key']`).val(data);
+        },
+        onSubmitSuccess: function(response) {
+            if (response.success) {
+                $widgets_table.ajax.reload();
+                $('#remove-widget-modal').modal('hide');
             }
-        });
+        }
+    });
+
+    $(`#widgets-list`).on('click', `a[href='#remove-widget-modal']`, function(e) {
+        removeWRowData = $widgets_table.row($(this).parent()).data();
+        remove_widget_modal.invokeModalInit();
+    });
+
+    let editWRowData = null;
+
+    const edit_widget_modal = $(`#edit-widget-modal form`).modalHandler({
+        method: 'post',
+        endpoint: `${http_prefix}/lua/edit_widgets.lua`,
+        csrf: edit_csrf,
+        beforeSumbit: function() {
+            return {
+                action: 'edit',
+                JSON: JSON.stringify(serializeFormArray($(`#edit-widget-modal form`).serializeArray()))
+            };
+        },
+        loadFormData: function() {
+            return editWRowData;
+        },
+        onModalInit: function(data) {
+
+            const editParams = Object.assign({
+                name:       data.name,
+                type:       data.type,
+                ds_hash:    data.ds_hash,
+                interface:  data.params.ifid,
+                widget_key: data.key,
+            }, data.params);
+
+            delete editParams.ifid;
+
+            $(`#edit-widget-modal form`).find('[name]').each(function(e) {
+                $(this).val(editParams[$(this).attr('name')]);
+            });
+        },
+        onSubmitSuccess: function(response) {
+            $widgets_table.ajax.reload();
+            $('#edit-widget-modal').modal('hide');
+        }
     });
 
     $(`#widgets-list`).on('click', `a[href='#edit-widget-modal']`, function(e) {
-
-        const rowData = $widgets_table.row($(this).parent()).data();
-
-        $(`#edit-widget-modal form`).modalHandler({
-            method: 'post',
-            endpoint: `${http_prefix}/lua/edit_widgets.lua`,
-            csrf: edit_csrf,
-            beforeSumbit: function() {
-                return {
-                    action: 'edit',
-                    JSON: JSON.stringify(serializeFormArray($(`#edit-widget-modal form`).serializeArray()))
-                };
-            },
-            loadFormData: function() {
-                return rowData;
-            },
-            onModalInit: function(data) {
-
-                const editParams = Object.assign({
-                    name:       data.name,
-                    type:       data.type,
-                    ds_hash:    data.ds_hash,
-                    interface:  data.params.ifid,
-                    widget_key: data.key,
-                }, data.params);
-
-                delete editParams.ifid;
-
-                $(`#edit-widget-modal form`).find('[name]').each(function(e) {
-                    $(this).val(editParams[$(this).attr('name')]);
-                });
-            },
-            onSubmitSuccess: function(response) {
-                $widgets_table.ajax.reload();
-                $('#edit-widget-modal').modal('hide');
-            }
-        });
-
+        editWRowData = $widgets_table.row($(this).parent()).data();
+        edit_widget_modal.invokeModalInit();
     });
 
     $(`#add-widget-modal form`).modalHandler({
@@ -164,6 +168,6 @@ $(document).ready(function() {
             $widgets_table.ajax.reload();
             $('#add-widget-modal').modal('hide');
         }
-    });
+    }).invokeModalInit();
 
-});
\ No newline at end of file
+});
diff --git a/httpdocs/js/utils/modal-utils.js b/httpdocs/js/utils/modal-utils.js
index fa55c95c38..b2631c80fe 100644
--- a/httpdocs/js/utils/modal-utils.js
+++ b/httpdocs/js/utils/modal-utils.js
@@ -14,6 +14,7 @@
             this.dialog = $(element).closest(".modal");
             this.options = options;
             this.csrf = options.csrf;
+            this.skipAys = options.skipAys;
             this.observer = new MutationObserver((list) => {
                 this.bindFormValidation();
             });
@@ -26,35 +27,37 @@
             if (!submitButton) throw new Error("The submit button was not found inside the form!");
 
             /* Are you sure */
-            const modal_id = modal_id_ctr++;
+            if(!this.skipAys) {
+                const modal_id = modal_id_ctr++;
 
-            $(this.element).attr("data-modal-handler-id", modal_id);
-            this.form_sel = `[data-modal-handler-id="${modal_id}"]`;
-            aysHandleForm(this.form_sel);
+                $(this.element).attr("data-modal-handler-id", modal_id);
+                this.form_sel = `[data-modal-handler-id="${modal_id}"]`;
+                aysHandleForm(this.form_sel);
 
-            const self = this;
+                const self = this;
 
-            // handle modal-script close event
-            this.dialog.on("hide.bs.modal", function(e) {
-                // If the form data has changed, ask the user if he wants to discard
-                // the changes
-                if($(self.element).hasClass('dirty')) {
-                    // ask to user if he REALLY wants close modal
-                    const result = confirm(`${i18n.are_you_sure}`);
+                // handle modal-script close event
+                this.dialog.on("hide.bs.modal", function(e) {
+                    // If the form data has changed, ask the user if he wants to discard
+                    // the changes
+                    if($(self.element).hasClass('dirty')) {
+                        // ask to user if he REALLY wants close modal
+                        const result = confirm(`${i18n.are_you_sure}`);
 
-                    if(!result)
-                        e.preventDefault();
-                    else
-                        aysResetForm(self.form_sel);
-                }
-            }).on("shown.bs.modal", function(e) {
-                // add focus to btn apply to enable focusing on the modal hence user can press escape button to
-                // close the modal
-                $(self.element).find("[type='submit']").trigger('focus');
+                        if(!result)
+                            e.preventDefault();
+                        else
+                            aysResetForm(self.form_sel);
+                    }
+                }).on("shown.bs.modal", function(e) {
+                    // add focus to btn apply to enable focusing on the modal hence user can press escape button to
+                    // close the modal
+                    $(self.element).find("[type='submit']").trigger('focus');
 
-                // Reinitialize the form AYS state with the new data
-                aysResetForm(self.form_sel);
-            });
+                    // Reinitialize the form AYS state with the new data
+                    aysResetForm(self.form_sel);
+                });
+            }
         }
 
         fillFormModal() {
@@ -142,7 +145,8 @@
                     self.delegateSubmit();
 
                     /* Allow the form to be closed */
-                    aysResetForm(self.form_sel);
+                    if(!self.skipAys)
+                        aysResetForm(self.form_sel);
                 })
                 .fail(function (jqxhr, textStatus, errorThrown) {
                     self.options.onSubmitError(dataToSend, textStatus, errorThrown);
@@ -159,7 +163,8 @@
             if (!resetButton) return;
             resetButton.click(function(event) {
                 /* TODO: finisch the reset logic */
-                aysResetForm(self.form_sel);
+                if(!self.skipAys)
+                    aysResetForm(self.form_sel);
             });
         }
     }
@@ -172,6 +177,7 @@
             csrf:               '',
             endpoint:           '',
             resetAfterSubmit:   true,
+            skipAys:            false, /* True to skip the are-you-sure check on the dialog */
             method:             'get',
             /**
              * Fetch data asynchronusly from the server or
@@ -292,7 +298,6 @@
         }, args);
 
         const mh = new ModalHandler(this, options);
-        mh.invokeModalInit();
         mh.delegateSubmit();
 
         return mh;