External Widgets and Ajax Navigation
Toolbars such as headers and footers, popups, panels, and many other widgets can be placed outside jQuery Mobile pages. When you use them outside pages, you should keep in mind that you must structure your application such that the widgets work together with the Ajax navigation.
When Ajax navigation is used in combination with the pushState plugin, the location bar is updated to show the URL of the file that has been loaded via Ajax. This implies that the user may copy that URL and launch your application with a starting URL that is different from the one you had intended. For example, if your application contains two or more documents and if the pages inside the documents contain links to one another, then both documents must be equipped to handle your application's startup. This means that you have to copy script references into the <head> section of each document, and you must also copy external shared widgets (widgets that are not inside the page, but which are seen and/or used from both pages) to the <body> section of both documents.
Since navigation from one page to the other involves retrieving the other page via Ajax, and since jQuery Mobile discards everything received in an Ajax call except for the first page, you may wish to optimize all your pages using server-side scripting to instruct the server to send the full document with headers, shared widgets, and page, whenever it is retrieved via an HTTP request, but to only send the page when the document is accessed via an Ajax request. This will save bandwidth for the user and reduce load times for your application.
You can use and if-statement similar to the following to wrap external widgets and the document's <head> section, causing them to be included in a HTTP request, but be excluded from an Ajax request:
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
// Markup inside the body of this if-statement is only sent with HTTP requests