Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Izelude opened this issue Jun 29, 2018 · 0 comments
Open

Comments

@Izelude
Copy link

Izelude commented Jun 29, 2018

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

@Izelude Izelude changed the title Choice dialog only shows up once when form is inside a Bootstrap 4 modal Choice dialog only shows up once when form is inside a Bootstrap modal Jun 29, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant