jQuery Mobile: Use same header footer for all pages

Question

I'm trying to implement some code that will create the headers and footers on all of my web pages instead of hard coding them. I tried this:

I had this in my "main page" I just called wrapped the header I wanted in a div.

<div id="headerProto">
   <div data-role="header" data-position="fixed" data-theme="b">
       <h1> Title </h1>          
   </div> 
</div>

Then in the other pages I had:

<div class="headerChild">
</div>

And I added:

$(".headerChild").html($("#headerProto").html());

No dice. Either way that was a total guess on how I'm supposed to do it. Is there a better way?

Answer 1

Using .load() may help, then just put the code you want to include in the file you are linking to.

$('.headerChild').load('pathto/headerProto.html')

An alternative way if you do not want to keep the data in a separate file: I have not done this but from some quick research you can also link to an element within the file.

$('.headerChild').load('pathto/mainPage.html #headerProto')

Answer 2

Credit goes to mariachi.

http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition

I am just pasting his solution.

1.) Wrap your data-role="header" and put the id="constantheader-wrapper".

Mobile sidor

Use a div if you want to in the header wrapper, but try to have the full rendered header output like in this case, else it will loose the styling when you reload a page. NOTE! Put the header in your first page, then this method just add the header html to all the other pages.

2.) Put the function in file or inline script:

jQuery.fn.headerOnAllPages = function() {
    var theHeader = $('#constantheader-wrapper').html();
    var allPages = $('div[data-role="page"]');

    for (var i = 1; i < allPages.length; i++) {
        allPages[i].innerHTML = theHeader + allPages[i].innerHTML;
    }
};

3.) Call the function from document ready, for example:

$(document).ready(function() {
    $().headerOnAllPages();
});

Answer 3

I use .clone()

In my multipage jQuery Mobile project I have a header on my main page:

<div data-role="header" data-id="header" class="ui-header ui-bar-b" role="banner" id="headerMaster">
   <a href="#my-menu">Menu</a>
   <h1 class="ui-title" role="heading" aria-level="1">My Header</h1>
</div>

and in all the subsequent pages (or divs with data-role=page) I have this:

<div class="headerChild">
</div>

and then on pageinit you clone the master and append to all the children:

$(document).delegate("#index", "pageinit", function () {
       $("#headerMaster").clone().appendTo(".headerChild");
});

EDIT: if pageinit doesn't work for you, try the pagebeforecreate event

$(document).delegate("#index", "pagebeforecreate", function () {
     $("#headerMaster").clone().appendTo(".headerChild");  
});