JQuery Mobile 1.4.5 - don't navigate 'back

Question

Prior to JQM 1.4, I created dialogues using data-role="dialog" and those pages were not added to the back stack, so navigating off one and then pressing back would bring you to the page before the dialog.

Now with 1.4.5, dialogues are defined as data-role="page" with data-dialog="true". Using this method, the dialog is added to the back stack, so if I navigate off the dialog and then tap back I am returned to the dialog. This is not the behavior I want. Is there a way, when the dialog opens, to tell JQM NOT to add it to the back stack?

Answer 1

Updated

As of jQuery Mobile 1.4, dialog widget is deprecated and will be removed in 1.5. It is now converted into a page - as you've mentioned - with data-dialog="true".

When you navigate to a dialog, jQM updates framework's navigation history as well as browser's navigation history. Even if you navigate to a dialog programmatically with changeHash disabled, when you hit back button, you will redirected to second previous history record.

A work around is to listen to pagecontainerbeforechange and alter toPage to navigate to the page where the dialog was called.

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "string" && data.options.direction == "back") {
        var active = $.mobile.navigate.history.activeIndex;
        for (var i = active; i >= 0; i--) {
            if (!$($.mobile.navigate.history.stack[i].hash).hasClass("ui-dialog") && !$($.mobile.navigate.history.stack[i].hash).hasClass("ui-page-active")) {
                data.toPage = $.mobile.navigate.history.stack[i].url;
                data.options.transition = "flip";
                break;
            }
        }
    }
});

When you want to alter toPage, it should be a string and not an object. The event fires twice on each navigation, it returns string first and then an object.

When it returns a string, check navigation direction options.direction. If the direction is back, loop through $.mobile.navigate.history.stack in reversed order. The previous record should not be a dialog ui-dialog nor the active page ui-page-active. If both conditions return true, alter toPage.

Demo