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?

Answer 1

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 (eg depending if user is logged in or not. )

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