Use the same header/footer in all jQuery Mobile pages

Question

I'm developing a web application that uses jQuery Mobile and JSONP requests to update the content. One of the project requirements is that could not have a server-side web language since the goal is to use PhoneGap in order to build a web application.

Since I can't use a server side method such as include, I'm thinking in loading the content of the HTML pages via AJAX to data-role="content" in order to use the same header/footer in all pages without duplicating the code or generating him through JavaScript. The problem with this approach is that I lose access of some cool jQuery Mobile features, such as elements auto initialization, page transitions, back/forward browser buttons, etc.

What is the best way to use the same header/footer in all jQuery Mobile pages through JavaScript?

Can't you utilize the server-side of things to reuse your code? — Kris Krause, Apr 14 '12 at 20:01
Take a look at my answer here: http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg/9204896#9204896 — bmurmistro, Apr 14 '12 at 23:49
@KrisKrause no, sorry I forgot to mention that. I've already updated the question. — Diogo Cardoso, May 05 '12 at 01:30

score 0 · Answer 1 · answered Jul 11 '13 at 08:01

well you can send from web service footer,header, and content for every page, and update pages.In this way you can also dynamically change links in (header/footer)navigation bar (e.g. depending if user is logged in or not. )

You can use pagebeforeshow event to update HTML $(document).on("pagebeforeshow", function (event, data) { // });

Use the same header/footer in all jQuery Mobile pages

1 Answers1