IE11 ignoring "Stay on page" when navigating with window.location

[Lann094]

Hi,
I'm having trouble with one of our forms, in which there is a select control that runs the following script upon onchange:

function changeTeam() {
    var url = '/Admin/ChangeTeam/_id_'.replace("_id_", document.getElementById("teamSelect").value);
    window.location = url;
}

I am fairly new to this, so I'm not sure if there's something extra I have to add to my script or what. It works fine in Chrome and Firefox.

[NightOwl888]

You can attach your own event handler to the event(s) that call changeTeam and Dirty Forms will be able to cancel/refire the event as needed. But do note that a regular function can't be canceled like an event, so you will need to attach events to the DOM in every event your function is called from.

    // Bind additional events to existing handlers
    $(document).bind('bind.dirtyforms', function (ev, events) {
        var originalBind = events.bind;

        events.bind = function (window, document, data) {
            originalBind(window, document, data);
            $('button.mybutton').bind('click', events.onAnchorClick);
        };
    });

IMPORTANT: The handler for bind.dirtyforms must be declared before .dirtyForms() is called.

[Lann094]

Hi NightOwl888,

Thanks for your quick reply, and sorry I couldn't get back to you sooner. I've tried attaching event handlers like you suggested, but I'm not entirely sure how to go about adapting it to my situation. It seems that the original bind always causes page navigation to occur, and I don't entirely understand how to go about canceling the event through another event handler.

I apologise if this is a simple question, but I can't find any resources to suit my situation.

[NightOwl888]

Assuming you have:

<input type="button" id="mybutton" onclick="changeTeam()" value="Change Team" />

Dirty Forms automatically attaches click event handlers to <a> elements, but others such as buttons are ignored by default. The solution is to add your own event handler.

    // Bind additional events to existing handlers
    $(document).bind('bind.dirtyforms', function (ev, events) {
        var originalBind = events.bind;

        events.bind = function (window, document, data) {
            originalBind(window, document, data);

            // Custom event handler, which will allow Dirty Forms to cancel and resume the event
            $('#mybutton').bind('click', events.onAnchorClick);
        };
    });

[Lann094]

I think that's where I'm having the issue, as it's not just a button running the function. I modified it to become a DOM event, and I now have this:

<select name="teamSelect" class="form-control dirtyignore" id="teamSelect">
    <option value="1">Accounting</option>
    <option value="3">Administration</option>
    <option value="2">Financial Planning</option>
</select>

$('#teamSelect').on("change", function () {
    var url = '@Html.Raw(Url.Action("ChangeTeam", "Admin", new { id = "_id_" }))'.replace("_id_",document.getElementById("teamSelect").value);
    window.location = url;
});

$('form').dirtyForms({
    dialog: {
        dialogID: 'saveConfirm',
        proceedButtonClass: 'btn-proceed',
        stayButtonClass: 'btn-stay'
    }
});

$('#teamSelect').addClass($.DirtyForms.ignoreClass);

I've had to ignore the select list since it's actually in the form, but is obviously going to change each time someone tries to navigate.

[NightOwl888]

As far as Dirty Forms is concerned, a DOM event is the same as any other DOM event. The type of element does not matter. Only thing that matters is whether the event can be cancelled.

But, only anchor tags are wired by default because they are most likely to navigate from the page, so this one you need to do manually.

// Bind additional events to existing handlers
$(document).bind('bind.dirtyforms', function (ev, events) {
    var originalBind = events.bind;

    events.bind = function (window, document, data) {
        originalBind(window, document, data);

        // Custom event handler, which will allow Dirty Forms to cancel and resume the event
        $('#teamSelect').bind('change', events.onAnchorClick);
    };
});

$('#teamSelect').on("change", function () {
    var url = '@Html.Raw(Url.Action("ChangeTeam", "Admin", new { id = "_id_" }))'.replace("_id_",document.getElementById("teamSelect").value);
    window.location = url;
});

$('form').dirtyForms({
    dialog: {
        dialogID: 'saveConfirm',
        proceedButtonClass: 'btn-proceed',
        stayButtonClass: 'btn-stay'
    }
});

$('#teamSelect').addClass($.DirtyForms.ignoreClass);

The point is, Dirty Forms needs to intervene if someone changes this select element. When you change the dropdown, the change event is fired for Dirty Forms, which is then cancelled so the dialog can be shown and navigating away does not occur. If you click "proceed" on the dialog, Dirty Forms will refire this event so your event handler will run, and your page navigate will happen.

[Lann094]

I've tried adding the code you gave exactly, but it still doesn't appear to be working correctly. In IE the confirmation will fire when I change the select list, though it will still change pages regardless of what choice I make. In Chrome and Firefox, the confirmation doesn't fire at all.

I apologise for taking so much of your time, I'm just really determined to get this working correctly.

[NightOwl888]

I mocked up a page to do this and it turns out the solution is a bit more complex than I originally thought. There were 2 issues:

1. You need to have a GUI JavaScript dialog in order for it to function correctly.
2. The change event is non-cancellable.

The second issue was the main problem. The solution to that is:

1. Create a click event so the cancellation can be properly tracked.
2. Attach a flag to the custom event so it can be identified.
3. In the onAnchorRefireClick event, check to see if we created an event to change the team, and if so, call changeTeam.

For this demo, I used the BlockUI dialog module (primarily because it doesn't require CSS, so it is easier to use). You can use any of the pre-built dialog modules or you can build your own dialog module. But as mentioned previously, you must have a dialog module for this to work.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        input.dirty, input.dirty + label, select.dirty, textarea.dirty {
            background-color: red;
        }
    </style>
    <script type="text/javascript" src="//cdn.jsdelivr.net/g/[email protected],[email protected],[email protected](jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.blockui.min.js)"></script>
</head>
<body>
    <form action="/" id="dialog-form-thing" method="post"> 
        <input id="text1" type="text"/>

        <select name="teamSelect" class="form-control" id="teamSelect">
            <option value="1">Accounting</option>
            <option value="3">Administration</option>
            <option value="2">Financial Planning</option>
        </select>
    </form>

    <script>
        $(function() {

            /*   Code for managing events when team is changed  */
            $(document).bind('bind.dirtyforms', function (ev, events) {
                var originalOnRefireAnchorClick = events.onRefireAnchorClick;

                // Custom event handler, which will allow Dirty Forms to cancel and resume the event
                $('#teamSelect').bind('change', function() {

                    // change event is non-cancelable. So, we create
                    // a new click event that can be cancelled.
                    var event = new $.Event('click');

                    // Add a flag so the event that refires can
                    // call changeTeam
                    event.data = { isChangeTeam: true };

                    // Simulate an anchor click
                    events.onAnchorClick(event);

                    // If the event wasn't cancelled, change the team
                    if (!event.isDefaultPrevented()) {
                        changeTeam();
                    }
                });

                events.onRefireAnchorClick = function (e) {
                    if (e.data && e.data.isChangeTeam) {
                        changeTeam();
                    } else {
                        originalOnRefireAnchorClick(e);
                    }
                };
            });

            function changeTeam() {
                var url = 'http://www.google.com/#_id_'.replace("_id_",document.getElementById("teamSelect").value);
                window.location = url;
            }
            /*   End Code for managing events when team is changed  */


            /*   Code for resetting the original selection   */
            var originalSelection = 1;

            $('#teamSelect').bind("focus", function () {
                originalSelection = this.value;
            });

            $(document).bind('afterstay.dirtyforms', function () {
                //Reset dropdown to original team
                $('#teamSelect').val(originalSelection);
            });
            /*   End Code for resetting the original selection   */


            $('form').dirtyForms({
                dialog: {
                    dialogID: 'saveConfirm',
                    proceedButtonClass: 'btn-proceed',
                    stayButtonClass: 'btn-stay'
                }
            });

            $('#teamSelect').addClass($.DirtyForms.ignoreClass);

        });
    </script>
</body>

[NightOwl888]

Did the above solution resolve your issue?

[Lann094]

Sorry NightOwl, this project has been backbenched, since other projects have become more urgently needed. I sincerely appreciate all your assistance with this, and I'll report back when this becomes my focus once again. Sorry to leave you hanging for so long without a response!