Loading non-jqueryMobile page into jQM DOM with jQM header and footer

Question

I have a single html page that I'm using jquery mobile on to create a web app with multiple divs with the data-role="page" attribute. Each page has a fixed header and footer that remains consistent through page transitions.

However, I want to load another html page not built in the jquery-mobile framework but in the same directory into the DOM and have the persistent, fixed header and footer appear over that page.

Is this possible? I've looked at the jquery Mobile documentation for using $mobile.changePage() and $mobile.loadPage() and am not really clear on how to implement it.

Thus far I have this (edited per @Jack's instructions):

HTML

    <div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->   

Jquery

$(document).on('pageinit'(function() {
$("#external").load("external_page.html").trigger("create");
}));

Currently, clicking on the link loads the #external_page just fine with the header and footer, but the content of external_page.html does not load. The section of #external_page is still empty.

Thoughts?

Answer 1

You should be able to this using jQuery's load to load the external page and then wrap that in a div with a data-role="page" with the appropriate headers/footers, append it to the DOM and then trigger the create event to initialize the page. Alternatively you can also prepare a page wrapper (div with data-role="page") on your first page and just insert the contents of your external page into there (the way you are attempting to do so now).

Looking at your current JavaScript, your syntax for .on is a little off, and your missing a comma.

Using your markup you should be able to do the following

<div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
       <a href="#" data-rel="back" data-icon="back">Back</a> <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->   


    <script type="text/javascript">
        $(document).on('pageinit', '#dog_bars', function () {
             //you can probably leave out the trigger('create') since the wrapper
             //is already part of the DOM and JQM should enhance it
            $('#external').load("external_page.html").trigger("create");
        });
    </script>

external_page.html

<!DOCTYPE >
<html >
<head>
    <title></title>
</head>
<body>
    <div id="pageWrapper">
        <p>Some test text</p>
        <input type="text" />

        <select>
            <option value="value">Option1</option>
            <option value="value2">Option2</option>
        </select>

    </div>
</body>
</html>