Jquery Mobile nested list - Back button gone?

Question

In the latest build of jQuery Mobile, the way to add a back button is by adding 'data-add-back-btn="true"' to your overall "page" div.

This works great. However, When viewing a nested list submenu the back button is no longer there.

By looking at the output code, it seems whats happening is, jquery mobile is hiding your original "page" div, and creating a new one (without the back button attribute set to true).

I dont have a demo URL at this time, but you can see the issue in action at the demo page http://jquerymobile.com/test/docs/lists/lists-nested.html

My question is, is there something I need to add, that will tell it to add a back-button for nested menus? and if not, is there some way I can hack it to automatically add the back-button attribute to all "page" divs?

Appreciate any help on this is issue.

Answer 1

Had the same issue, here's a solution:

As back button is now turned off by default, you need to turn it on before loading jQuery mobile (and after loading jQuery):

    <script type="text/javascript">
$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });    
</script>   

Now, as jQuery's back button is buggy by itself, you'll sometimes see it appear where it shouldn't be. To prevent this, add the following to your page container:

data-add-back-btn="false"

This will prevent the back button from getting confused by page refresh and showing where it shouldn't be.

Answer 2

Something like this should help:

$(':jqmData(url^=MYPAGEID)').live('pagebeforecreate', 
  function(event) {
    $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)')
      .prepend('<a href="#" data-rel="back" data-icon="back">Back</a>')
  });

Replace MYPAGEID with the ID of the page containing the list.

The event will be triggered when the sub page is dynamically created and will insert the back button as the first item in the header. That will then be picked up and made nice when the jQueryMobile magic is run automatically afterward.

The filtering is a little odd because you can't reference the ui-page in the first selector (it stumbles over the & in the data-url and it appears you can't use a filter before the .live()) Without this extra filtering you get the back button on the parent page as well.