Skip to content

Choice dialog only shows up once when form is inside a Bootstrap modal #130

Description

@Izelude

Hi,
I have the following scenario:
I open a Bootstrap Modal which has a form inside of it, which i want to use dirtyForms on.
here the code:

$(".modal-container")
        .on("show.bs.modal",
        function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var url = button.data('url') || button.attr("href");
            var modal = $(this);

            // note that this will replace the content of modal-content ever time the modal is opened
            var modalContent = modal.find(".modal-content");
            modalContent.load(url, function (response, status, xhr) {
                $.validator.unobtrusive.parse(modalContent[0]);
                $('form').validateBootstrap(true);
                modals.refreshControls();

                //RELEVANT FOR THE QUESTION:
                $('form').dirtyForms();
                $('form').find('[type="reset"],[type="submit"]').attr('disabled', 'disabled');
                $('form').on('dirty.dirtyforms clean.dirtyforms', function (ev) {
                    var $form = $(ev.target);
                    var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');
                    if (ev.type === 'dirty') {
                        $submitResetButtons.removeAttr('disabled');
                    } else {
                        $submitResetButtons.attr('disabled', 'disabled');
                    }
                });
            });
        });

also at another point in code to get the events from a x button in the top of the modal and a cancel button of the modal i use the following:

$(function() {
    $(document).bind('bind.dirtyforms', function (ev, events) {
        var originalBind = events.bind;

        events.bind = function (window, document, data) {
            originalBind(window, document, data);
            $('#btn-cancel').bind('click', events.onAnchorClick);
            $('.close').bind('click', events.onAnchorClick);
        };
    });
});

i import dirtyforms locally and use the Bootstrap dialog:

<script src="~/lib/jquery.dirtyforms/jquery.dirtyforms.min.js"></script>
 <script src="~/lib/jquery.dirtyforms/plugins/jquery.dirtyforms.dialogs.bootstrap.min.js"></script>

And it works just fine... but only once.
If i choose "leave this page" and open any modal with a form again, the dirty class is still set correctly if the form is dirty and the submit button is correctly active / inactive depending on it BUT if i close the modal in any way (be it by browser command like reload or by trying to close it with the cancel button or x button) the dirtyforms confirmation does not pop up.

Any help would be greatly appreciated!

Thx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions