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?

Are you unable to use a dynamic server-side language like PHP to generate these pages? That would be the best way. — Brandan, Mar 08 '12 at 16:14
http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg/9204896#9204896 — bmurmistro, Mar 08 '12 at 17:15

atrljoe · Accepted Answer · 2012-03-08T16:15:45.287

9

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')

edited Mar 08 '12 at 16:15

answered Mar 08 '12 at 16:03

atrljoe

8,031
11
67
110

score 4 · Answer 2 · edited Mar 07 '15 at 22:26

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();
});

for 1) here may not clear as mariachi wrote a sample `

...

` — ob.yann, Nov 12 '15 at 10:14

ED-209 · Answer 3 · 2015-03-09T09:16:48.947

4

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");  
});

edited Mar 09 '15 at 09:16

answered Nov 15 '13 at 17:03

ED-209

4,706
2
21
26

This works for me, although I had to put it in (document).ready instead of the delegate. – Marcel Marino Mar 07 '15 at 22:29
@MarcelMarino looking at my code repo again it looks like I changed from a pageinit event to the pagebeforecreate event instead, so perhaps I had trouble with pageinit too - I can't remember it was too long ago :) I'll add an edit to the answer – ED-209 Mar 09 '15 at 09:15

jQuery Mobile: Use same header footer for all pages

3 Answers3

Linked