How to get the header & footer on jQuery Mobile-created subpages

I have an HTML file with a bunch of JQM "pages". So, I'm able to create a nice header and footer that is persistent across all my pages in this file...except the ones that JQM creates by itself when navigating a list that has a sublist inside it.

When you click on Page2, then Foo, you get a JQM-manufactured page for the Foo sublist, with Baz1, 2, and 3. This page lacks the header and footer. Any ideas on how to get those into that page, short of splitting it off as a manually-created new page?

Thanks, Dave

Here's a working example page: http://geology.wwu.edu/dept/testnew/prospectives/test2.php

Here is some demo code:

<body>
<div data-role="page" id="home">
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div>
    <div data-role="content">
        <h1>Main Content - Page 1</h1>
        <p>Lorem ipsum.</p>
        <ul data-role="listview" data-theme="c">
            <li><a href="#page2" >Page2</a></li>
            <li><a href="#" >Page3</a></li>
        </ul>
    </div>
    <div data-role="footer" data-id="foo" data-position="fixed">
        <div data-role="navbar" data-theme="c">
            <ul>
                <li><a href="#">Ftr1</a></li>
                <li><a href="#">Ftr2</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li><a href="#" >Foo</a>
            <ul>
                <li><a href="#" >Baz1</a></li>
                <li><a href="#" >Baz2</a></li>
                <li><a href="#" >Baz3</a></li>
            </ul></li>
            <li><a href="#" >Bar</a></li>
        </ul>
    </div>
    <div data-role="footer" data-id="foo" data-position="fixed">
        <div data-role="navbar" data-theme="c">
            <ul>
                <li><a href="#">Ftr1</a></li>
                <li><a href="#">Ftr2</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Solution

load js like this：

$(document).ready(function() {
    var hdhtml = $($.mobile.activePage).children('div').eq(0).clone();
    var fthtml = $($.mobile.activePage).children('div').eq(2).clone();
    $('div:jqmData(role="page")').live('pageinit',function() {
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    });
    if( $('div:jqmData(role="page")').length > 2 ){
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    }
});

If you don't wont to set title tags like <h1> to <div data-role="header">, set the height or margin-bottom to header-div.