How to modify jQuery mobile history Back Button behavior

Question

I'll start this off with I have researched a bit, but no solution that solves what seems like it should be a simple JQM modification.

I have a wine review webapp that has the following view user flow: http://5buckchuck.com/

Wine type > Wine list > Wine Details > Wine review (redirect via django backto ) > Wine Details updated from review

What I want to happen is when the user presses the back button it should go back to the wine list. What currently happens is the the Wine Detail view is reloaded. It takes pressing back three times to get back to the Wine List. :-(

My thoughts to solve this were two:

1. Splice the last 3 items from the history stack, if the last items in the history stack was Wine Review. I had a hard time trying to introspect the last history object to get the pageURL. I have a feeling that this solution is a bit too fragile though.

   var last_hist = $.mobile.urlHistory.getActive();
   last_hist.data.pageURL;
   

2. The second thought was to override the back button behavior so that the back button from the Wine Detail view would always go back to the Wine list view

   $('div#wine_detail').live('pageshow',function(event, ui){      
     $("a.ui-btn-left").bind("click", function(){
       location.replace("/wines/{{wine.wine_type}}/#");
     });   
   });
   

There is probably a better way to do this, but I'm a bit out of ideas.

Update: So I continue to hack on this with somewhat negligible results. On thing I have found was this is what I basically need to work: window.history.go(-3)

from the console it does exactly what I need.

So I tried binding it the the back button like such:

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
   if (last_url.match(review_url) )
     {
       $('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {  
         console.log("click should be bound and going back in time...")
         window.history.go(-2);
         });
   }
   else
   {
     console.log('err nope its: ' + last_url);
   }
 });

No dice, something interupts the transaction...

Answer 1

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