Closing the Bootstrap Modal bind submit event and send multiple requests on submit?

Viewed 21

I have a modal which contains check boxes to send delete request for the selected check boxes and I have issue of multiple requests in case of dismissing once and submitting the next time

      /* Delete Url dialog */
      var $deleteEntriesDialog = null;
      this.$editor.on("show.bs.modal", "#delete-url-modal", (e) => {
        $deleteEntriesDialog = $(e.currentTarget);
        $deleteEntriesDialog.find(".modal-body").html("");
        var text = $el.parent().parent().data("raw").text;
        var modalBody = this.machinery.renderDeleteUrls(text);
        $deleteEntriesDialog.find(".modal-body").append(modalBody);
      });

The DELETE request is fired multiple times (it seems that each dismiss adds one repetition).

Here's what I am doing on submition:

   this.$editor.on("submit", ".delete-url-form", (e) => {
        var $form = $(e.currentTarget);
        var $deleteEntries = $form.find("input.form-check-input:checked");
        $deleteEntriesDialog.modal("hide");

        Object.entries($deleteEntries).forEach(([_, entry]) => {
          if (typeof entry.id !== "undefined") {
            this.removeTranslationEntry(entry.id); // Delete AJAX request function
          }
        });
        return false;
      });

I believe here is the issue - the events are bind when the dialog is shown, so in case it is shown multiple times (dismissing it between), the submit handler is also triggered multiple times causing duplicate DELETE requests.

I have tried to resolve the issue by doing this:

this.$editor.on("hide.bs.modal", "#delete-url-modal", () => {
        $deleteEntriesDialog = null;
      });

This is not helping in case if submit happens after one dismiss, the $deleteEntriesDialog is null so gives a TypeError.

0 Answers
Related