title: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap
body: <p>I'm diving into writing a mobile app with jQuery Mobile/PhoneGap. I'm using <a href="http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/" rel="noreferrer">this sample template</a> to start from, which uses HTML/JS to create the pages. Rather than have all the <code>&lt;page&gt;</code> tags in one single html file, he's got it split up so it's easier to edit.</p>
  
  <p><strong>Since I will have a separate file for each page, what's the best way to include the tempated header/footer?</strong> I've only seen it where you need to copy and paste the whole footer->navbar code into each HTML page. This doesn't seem like it should be. For example, if you want to change one menu item, you need to go into each page and change it. </p>
  
  <p>What's the solution that I'm missing?</p>
  
  <p>Maybe I'm just not understanding jQuery Mobile. For example, their sidebar they use for their docs - is that sidebar code copy and pasted onto each page? That doesn't make sense. It's the same idea as the question I'm asking here about the footer. </p>
  
  <p><a href="http://jquerymobile.com/test/docs/pages/page-cache.html" rel="noreferrer">http://jquerymobile.com/test/docs/pages/page-cache.html</a></p>
  
  <p>This is what I've got that doesn't seem right (and <code>$.live('pageinit')</code> isn't working). This HTML is what goes on each HTML page:</p>
  
  <pre><code>&lt;div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;"&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the JS</p>
  
  <pre><code>$.live('pageinit', function (event) {
      displayFooter();
  });
  
  function displayFooter() {
      $('#mainFooter').html('&lt;div data-role="navbar" class="nav-glyphish-example" data-grid="d"&gt;' +
          '&lt;ul&gt;' +
          '&lt;li&gt;&lt;a href="#" id="menuitem1" data-icon="custom"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;' +
          '&lt;li&gt;&lt;a href="#" id="menuitem2" data-icon="custom"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;' +
          '&lt;li&gt;&lt;a href="#" id="menuitem3" data-icon="custom"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;' +
          '&lt;/ul&gt;' +
          '&lt;/div&gt;');
  }
  </code></pre>