Unbind existing function on Bootstrap Modal Close

Question

The website that I am working on has quite a few modal popups.

Each popup has about 50 fields/inputs, images and other custom elements in the body. For this reason a simple form reset $("#formId")[0].reset() won't work (Because it won't remove the images and reset the custom elements that was created by another developer).

The theory behind my solution.

Basically I made a function that will reload the modal popup from the include file that it loads from initially every time that the modal gets closed. It gets the URL of the file from a attribute added to each modal popup called data-url .

The function then gets the code for the modal popup and replaces it with the new code. That way the modal popup is empty again, as if it was never been opened.

The following code is to reset the modal. This is run initially when the document loads in the register_website_components() function, binding the function onto all modals on the page. It then uses a function called modal_close_trigger to re-add it self to the new modal code.

The issue comes that if you have closed the modal, it reloads it twice.

IE: In chrome developer tools I can see 2 individual requests loading the same code for the same modal popup.

I want to unbind the previous close function and re-add it.

function reset_modal(modal_id, modal_url) {
    $.ajax({
        type: "GET",
        url: modal_url,
        data: "",
        contentType: false,
        cache: false,
        processData: false,
        beforeSend: function(){
            $("[data-toggle=modal][data-target="+modal_id+"]").attr("disabled","disabled");
            $(modal_id + " .modal-body").html(loading_bar());
            $(modal_id + " .modal-footer").html("");
        },
        success: function (data) {
            $(modal_id).replaceWith(data);
            // This is the function that I want to unbind.
            $(modal_id).on("hidden.bs.modal", function () {
                var modal_parent = $(modal_id).parent();
                $(modal_id).remove();
                $(modal_parent).append(data);
                register_website_components();
                modal_close_trigger(modal_id, modal_url);
            });
            $(modal_id).modal("hide");
            $("[data-toggle=modal][data-target="+modal_id+"]").removeAttr("disabled");
        }
    });
}

loading_bar() is simply a function to load a Bootstrap Progress bar.

function loading_bar() {
    $process_bar_id = guid();
    var $process_bar = "<div class='col-lg-12' id='" + $process_bar_id + "'>";
    $process_bar = $process_bar + "<div class='progress'>";
    $process_bar = $process_bar + "<div class='progress-bar progress-bar-success progress-bar-striped active process-bar' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width:100%'></div>";
    $process_bar = $process_bar + "</div>";
    $process_bar = $process_bar + "</div>";
    $process_bar = $process_bar + "</div>";
    return $process_bar;
}

modal_close_trigger() is just code to reset the modal trigger but the code can be found below.

function modal_close_trigger(modalId, modalURL) {
    $(modalId).on("hidden.bs.modal", function () {
        reset_modal(modalId, modalURL);
    });
}

register_website_components() is a function that runs initially when the page is ready to run scripts. This function binds all sorts of other functions to various components on the website.

In conventional jQuery you have several options to unbind an existing function from an element. Examples can be found here (jQuery API Documentation) .

I looked the function below but I have no idea how to bind that to the modal close event.

var handler = function() {
  alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );

The modal close code came from here (Bootstrap API Documentation) .

What I need to know if how do I unbind this code: $(modal_id).on("hidden.bs.modal") or how do I use the example above to bind / unbind a function using a handler for the modal popup.

Answer 1

You can use .off

Something like : $( "#foo" ).off( "click", handler );

This answer is similar