jqueryMobile footer on nested list

Question

I have a nested list in a jQuery Mobile test app. And it has a fixed footer.

Works great until I click on an item in the list. Anything past the top level of the list has no footer.

Is there a way to keep the footer throughout the Nested List navigation?

Thanks in advance.

Adam.

Here's the code:

    <!-- ################ Menu Page  ##################### -->  

<div data-role="page" id="home" data-theme="a">
 <div data-role="header" data-position="inline">
  <h1>Menu</h1>
 </div>
 <div data-role="content">
  <ul data-role="listview">
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a> 
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
  </ul>
 </div><!-- eof content -->
 <div data-role="footer" data-position="fixed" data-id="myfooter">
   <div data-role="navbar">
     <ul>
       <li><a data-icon="grid" data-iconpos="top" href="#home">Menu</a></li>
       <li><a data-icon="star" data-iconpos="top" href="#location">Location</a></li>
       <li><a data-icon="alert" data-iconpos="top" href="http://www.site.com" rel="external">Full Site</a></li>
       <li><a data-icon="grid" data-iconpos="top" href="#addpad">Pad</a></li>
       <li><a data-icon="info" data-iconpos="top" href="#more">More</a></li>  
     </ul>       
   </div><!-- /navbar -->  
 </div><!-- eof footer -->
</div><!-- eof page#home --> 

Answer 1

I've been banging my head against this problem for several days, and for once Google was no help. I finally came up with the following solution. It copies the header HTML onto a new page before the transition begins, then removes the code from the previous page once the transition completes. The header and footer will still move with the page transition, but they will persist even while navigating nested lists.

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

Then just add id="header" to the header div and id="footer" to the footer, and place them as you normally would in your content.

Answer 2

This is how I went about it, footer only though. The attribute removal is to prevent the initialization code from executing twice which results in multiple spans in the blocks. This method keeps all the class styles on the elements for styling. Another nice thing is the code only has to run once on pagecreate to append the footers.

$('div.ui-page:not(#mainPage)').live('pagecreate', function(event) {
    if ($(event.currentTarget).find('footer').length == 0)
    {

        var footer = $('#footerNavBar').html(); 

        $(event.currentTarget).append( '<footer class="footerNavBar">' +footer + '</footer>');
        $(event.currentTarget).find('.ui-navbar').removeAttr('data-id').removeAttr('data-role').removeAttr('role');
    }
});

.

<div data-role="page" id="mainPage">
            <header data-role="header" data-position="inline" id="mainHeader">
                <h1>
                    <img src="images/icon.png" alt="icon" />
                </h1>
            </header>
        <section data-role="content">

        </section>
        <footer data-role="footer" data-position="fixed" id="footerNavBar">
            <div data-role="navbar" data-id="footerNavBar">
                    <ul>
                        <li><a href="index.html" data-icon="home" data-iconpos="bottom" data-prefetch>Home</a></li>
                        <li><a href="link2.html">Link 2</a></li>

                    </ul>
                </div>
            </footer>
        </div>