jQuery and PhoneGap - Include a HTML file clientside with HTML or JS?

Question

I'm creating an native Android application by using PhoneGap and jQuery Mobile.

When I create a multipaged page, i don't to include the same navigationbar all the time. So I tried to include a (s)html. But it doesn't work. This is what i've tried this far:

<!--#include file="navigation.inc.html" -->
<!--#include virtual="navigation.inc.html" -->
<!--#include file="navigation.inc.shtml" -->
<!--#include virtual="navigation.inc.shtml" -->

This page is not placed on a (web)server. When the navigation.inc.shtml is not a server, is it possible to include the file with html or javascript?

Answer 1

I'm running into the same issue. As far as I can tell, Android ignores Server Side Includes.

I've been getting close to the answer with load based on this answer but I'm taking a slightly different approach:

Wherever you need to include an external file:

<div data-include="footer"></div>

Then, at the end of my ( multipage ) index.html

$('div[data-include]').each(function() {
    $(this).load( $(this).attr('data-include') + '.html').trigger('create');
});

The problem is that it doesn't work for the initial page view. Any subsequent pages look great.