CODEWITHSUNDEEP
javascriptjquerybackbone.js
georgephillips
georgephillips

Reputation: 3570

prevent hashchange on back button

I have an application which uses backbone hash routing. When the page reloads I use the onbeforeunload event to tell the user that there are unsaved changes and prevent the page load. This does not work on hash change; so if the user presses back the dialog does not tell them there are changes pending and just goes back.

Is there anyway to detect the hash change and prevent it happening? something like onbeforehashchange

Upvotes: 2

Views: 4714

Answers (2)

georgephillips
georgephillips

Reputation: 3570

I ended up creating a function in my router. This is run before each route and puts up a jquery ui dialog and waits for a reply to run the route. This is quite messy code a I stripped out the application specific stuff. 

close: function(callback) {
    var hash = window.location.hash;

    if (this.afterHash && this.afterHash == hash) {
        this.dialog.dialog("close");
        return;
    }

    callback = callback || function () {};
    if (window.onbeforeunload) {
        var text = window.onbeforeunload();
        if (text) {
            if (!this.dialog) {
                var t = this;
                this.afterHash = this.previous;
                this.dialog = $("<div><p>" + text + "</p><p>Are you sure you want to close the dialog?</p></div>").dialog({
                    modal: true,
                    width: 420,
                    title: "Confirm Navigation",
                    close: function() {
                        t.dialog.dialog("destroy");
                        if (t.afterHash) {
                            t.navigate(t.afterHash, {
                                trigger: false
                            });
                            t.afterHash = null;
                        }
                        t.dialog = null;
                    },
                    buttons: {
                        'Leave this Page': function() {
                            t.afterHash = null;
                            t.dialog.dialog("close");

                            closeViewer();
                            callback.apply(t);
                        },
                        'Stay on this Page': function() {
                            t.dialog.dialog("close");
                        }
                    }
                });
            }
            return;
        }
    }
    this.previous = window.location.hash;
    callback.apply(this);
},​

on initialize you must add this.previous = window.location.hash;

Upvotes: 0

adeneo
adeneo

Reputation: 318202

Nope, you can detect the hashchange as it happens with something like below, but you can't really detect it before it happens. If you need the hash before it changes you can just store it somewhere.

var myHash = document.location.hash;

$(document).on('hashchange', function() {
    if (myHash != document.location.hash) {
        //do something
    }
});

You can't really detect the back button either, and if it does'nt trigger a reload, onbeforeunload won't work either.

If this functionality is essential, you should consider trying the haschange plugin or the history plugin, as one of those would make this a lot easier, and let you control the browser history and back/forth.

Upvotes: 4

Related Questions