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

Issue

This Content is from Stack Overflow. Question asked by ParthS007

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.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?