How to modify jQuery mobile history Back Button behavior

I'd prefer not to splice/pop/push with the urlHistory. How about redirect on pagebeforechange like so:

$(document).on("pagebeforechange", function (e, data) {    var overrideToPage;    // some for-loop to go through the urlHistory TOP>DOWN    for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {        // this checks if # = your target id. You probably need to adapt this;        if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {            // save and break            overrideToPage = $.mobile.urlHistory.stack[i].url;            break;        }        // set new Page        data.toPage = overrideToPage;    }});

This captures your back button changePage call and redirects to the page you want. You could also just set data.toPage = winelist directly of course.

I'm only doing this with #internal pages, but it shoudn't be so hard to set this up with winelist.html etc.

For more info, check the event page in the JQM docs

Why not have a back button in the header section of your page? Something like this:

<div data-role="header">    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>    <h1>Wine Detail</h1></div><!-- /header -->

I wrestled with this recently as well. After thinking about it, I realized I could rewrite my JQM application to use Pop Up "windows" for those pages that I didn't want in my history. This ended up being an easier and cleaner fix than mucking around with browser history.

Now users can intuitively use the browser back button, and I don't have to code application back buttons.

The only thing you have to ensure is that the popups don't themselves make it into the browser history, so make sure to set the "history" option to false like so:

$('#some_popup').popup( { history: false } );