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?

What happened when you tried the above code? What still needs to happen that the above code isn't making happen? — Jasper, Dec 10 '12 at 18:52
It loads external_page.html but not with any of the header or footer structure that appears on the first page. I'd like it to load external_page.html with the header and footer from the previous page built in. — John Hancock, Dec 10 '12 at 19:01
I think you will need to use jQuery's [load](http://api.jquery.com/load/) with a selector for the actual contents you want and then wrap it in a div with a data role="page" and then trigger the [create event](http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html) — Jack, Dec 10 '12 at 20:23
@Jack: see above where I tried your suggestion. Still not having much luck with getting the content of the other page to load. — John Hancock, Dec 10 '12 at 22:10
@JohnHancock I believe right now the problem is your function is never running. I'll try and post an example soon. — Jack, Dec 11 '12 at 12:04

score 1 · Accepted Answer · answered Dec 11 '12 at 14:47

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>

Awesome. Works great. Thanks very much. What changes from this if I wanted to load an external page via a URL into that #external div instead of a second page in the same directory? I tried replacing the string inside the .load function to the URL of the external page, but that didn't seem to work. Edit: Sorry, my syntax is pretty poor on this question. I realize that currently I'm loading an html page in the same directory called "external_page.html" into the prepared page wrapper. Wondering if it's possible to load an external website (ex: www.slate.com) into that wrapper? — John Hancock, Dec 11 '12 at 15:19
It shouldn't change, is the markup the same? is it on the same domain? — Jack, Dec 11 '12 at 15:23
Have a look at this [SO Question](http://stackoverflow.com/q/5059302/384985) regarding loading content from an external domain. — Jack, Dec 11 '12 at 15:33

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

1 Answers1