including the header and footer in jquery mobile multiple page site

Question

I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:

<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>

Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?

Any advice on this would be great Kyle

Answer 1

No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).

See documentation

I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...

Hope this helps

Answer 2

Have a look at the load() method in jQuery -> http://api.jquery.com/load/

Here is an exmaple :

$('#navigation').click(function() {
   $('#page1').load('page1.html');
});

This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.

Answer 3

you can use .load() in jQuery

for example in every page you will have this:

<div data-role="footer" class="ui-footer"></div>

now build this function:

function goTo(pageURL, transitionType) {
  $.mobile.changePage(pageURL, transitionType);
  $('.ui-footer').load('assets/includes/footer.html');
}

now when you move between pages, try onclick (or from code if you like) call:

goTo('home.html','slideup');

that would do the trick (this is what I use)

you can do the same for the headers as well.

keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.

I hope this helps for your purpose