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.

Solution 1

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.

Solution 2

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.

Comments

[J.T.Sage]

I don't believe that you can right now, but I may be wrong. If I am not though, you should file a bug report about this - it seems like this would be nice functionality to have.

[levi]

Figured it out. Before you load the jquery mobile script, you can set it to automatically add back buttons to all pages. See jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-releas‌​ed

[J.T.Sage]

levi - from what I read, it seems that this would enable it everywhere - are you overriding it on each page then? And if you override it on the first page of the list, does it show up on subsequent sub-lists?

[Ben]

What solution did you end up using? What worked best?

[Michael Maier]

In may case nothing helps I've found my solution here stackoverflow.com/questions/6221527/…

[Smamatti]

Thank you! This was driving me crazy. This is the only solution which is working for me as expected.

[Adaptabi]

This would be nice, but I can't see this attribute in the 1.0 rtm version at all

[anonymous]

You can include the & if you quote it: $(':jqmData(url^="MYPAGEID&ui-page")')

[Matias]

Thanks @slite !! this helped me a lot!

[mike]

Wish I could add a hundred up arrows here! Ideal solution that seems least complicated.