Function to imitate JS callback window.onBeforeUnload

I have a script on my site that will set the window.onbeforeunload whenever an input is changed, and when the form is submitted, disable the alert, and submit the form.

Current JS:

// If any inputs are changed, enable the alert if they change pages (Unless its a .trivial form)
// Wait til the page is fully loaded to do so, since some inputs are changed via JS
$(window ).load(function(){
    $('form:not(.trivial)').find( 'input, :checkbox, :radio, textarea' ).change( function (){
        template.nav_alert(true);
    });
});

// When the bwizard form is submitted, disable the nav alert
$('form[name="form-wizard"]').submit(function(){
    template.nav_alert(false);
});


template = {
    nav_alert: function ( status ) {
        "use strict";

        if ( status === true ) {
            window.onbeforeunload = function () {
                return 'Are you sure you want to leave? All changes you have made will be lost';
            };
        } else {
            window.onbeforeunload = null;
        }
    }
}

What I want to do though, is kinda implement my own onBeforeUnload feature, since the regular prompt is just ugly. Somewhat like Facebooks alert when you are commenting on something or adding a wall post, and try to navigate away, it will show a nice prompt.

Is there a way to basically watch if the window is going to navigate in any way? Whether it be just a HREF link, or JS onClick, or even a jQuery $('#this-item').click(){ redirectFunction(); }).. I mean anything.

I know I could do something like $('a').click(), but some redirects are done when classes or ID's are clicked, etc etc.

Also, how do I have a function continue with the default action after temporarily disabling it? Heres a small mock up script I created..

$(window).load(function(){
    $( 'a' ).click(function(e){
        e.preventDefault();

        new Messi('Are you sure you want to navigate away?', {
            title: 'Navigate',
            buttons: [
                {
                    id: 1,
                    label: 'Continue',
                    val: 'continue',
                    class: 'btn-success'
 },
                {
                    id: 2,
                    label: 'Cancel',
                    val: 'cancel',
                    class: 'btn-close'
 }
            ],
            modal: true,
            callback: function(val) {
                if(val === 'continue'){
                    // How to continue with the default action? Whether
 // its just an anchor link, an onClick attr, or even
 // something specified in JS
 }
                else if(val === 'cancel'){
                    // Dont do anything
 }
            }
        });
    });
});

So I cant just return true or false in a Messi callback, because that will pertain to the messi callback, not the parent function.

Anyhelp would be great! Thanks

Topic Participants
jhyland87
jakecigar

Function to imitate JS callback window.onBeforeUnload

Function to imitate JS callback window.onBeforeUnload

Topic Participants

jhyland87

jakecigar