6

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?

OrangeTux
  • 11,142
  • 7
  • 48
  • 73

3 Answers3

6

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.

Community
  • 1
  • 1
jhoff
  • 716
  • 7
  • 14
  • See: http://stackoverflow.com/questions/7974630/jquery-mobile-include-footer-from-external-file – tomo7 Apr 20 '13 at 19:54
1

I used the client side javascript code as suggested above from Jhof.

template example for Navigation header:

<body onLoad="initialization()">
....
  <div template-include="nav-header">
  </div>
  <script type="text/javascript">
    function loadTemplates() 
    { 
  $('div[template-include]').each(function() {
      $(this).load('tpl/' + $(this).attr('template-include') + '.html').trigger('create');
});
    } 
    function initialization() {
      ....
      loadTemplates();
      ....
    }
  </script>

<body>

I've created an initialization function where I call all my init functions as loadTemplates()

my initializationFunction is called from body.onLoad event. onLoad event fire at the end of the html parsing!

So it work also at the initial page view.

davehale23
  • 4,374
  • 2
  • 27
  • 40
dario.culoma
  • 11
  • 1
1

I was looking to a write-once approach to data-role="footer"s, and got it working as shown below. What I don't like it 1.) its not from an include file so 2.) the navbar code is a bit hard to read and maintain. (This code does NOT go in document.ready.)

var myFooter = '<div data-role="navbar"><ul><li><a href="#myPageName" >Send</a></li><li><a href="#myPageTwo" >Set Up</a></li><li><a href="#myPageThree" >Help</a></li></ul></div>';

// use this code pointing to each data-role="footer" where you want this navbar
$('div#myPageName').live("pagebeforecreate", function(){
      $('div#myFooterName').html(myFooter)
})

the pagecreate event works too.

pdschuller
  • 584
  • 6
  • 26