Jquery Mobile nested list - Back button gone?

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.

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.

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.

Taking a cue from the above posted example, this is how I was able to add the Back button to my nested lists.

What I was doing was optionally adding a parent listview() when certain conditions existed, then adding child listview()'s only when certain data were available.

Depending on the situation, I could have 0 - 5 child listviews.

for example:

self.cont.append($("<ul id='addtlInfo' />"));
self.loadMeds(self.cont.attr("id"));
self.loadContacts(self.cont.attr("id"));
self.loadDX(self.cont.attr("id"));
$.mobile.page.prototype.options.addBackBtn = true;

self.cont is simply a DIV on the page where I append my jQuery objects.

Each one of the .loadXXX methods looks basically like the following:

self.loadMeds = function (client_id) {
    if (!$("#clientMeds").exists()) {
        cw.ds.executeSQL("SELECT * FROM CLIENTS_MEDS WHERE client_id = ?", [client_id], self.appendMeds);
    };
};

self.appendMeds = function (tx, r) {
    var $meds = $("<li>Medications</li>");
    var $medlist = $("<ul />");
    var rs, meds, med = "";
    var m = 0;
    if (r.rows.length > 0) {

        for (var i = 0; i < r.rows.length; i++) {
            rs = r.rows.item(i);
            meds = rs.data.split("\n");

            for (var j = 0; j < meds.length; j++) {
                med = med + meds[j] + "<br />";

                if (m == 2) {
                    $medlist.append($("<li>" + med + "</li>"));
                    med = "";
                    m = -1;
                };
                m++;
            };

        };
    };
    $meds.append($medlist);
    var $m = $("<ul id='clientMeds' />").append($meds);
    $("#addtlInfo").append($("<li />").append($m));
    $("#clientMeds").listview();
};

As you can see, once I append each child list, I call the listview() method. This resulted in a parent listview with separate children listviews.

The issue had been, if I clicked any of the items in the parent listview(), I could view the children items as expected, but there was no way to go back to the parent listview. This really became a problem when I was testing my code on the iPad ( as there is no native BACK button. @ least on Droid, there is an actual back button ).

When I attempted the first fix: data-add-back-btn="true", this did not work as expected.

The second fix;

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

Didnt seem to elegant to me since it was page wide. I was looking to only effect this setting IF there was going to actually be a nested listview and was pleasantly surprised when it just worked as expected.