Jquery mobile page structure
- by Die 20
I built a jquery mobile site a while back and I have recently been expanding on it and noticing performance issues. I believe it is because I constructed the site using a multi-page set up where a single php file houses the following pages:
**ALL_PAGES.PHP**
<html>
<head>
/* external css and js files */
</head>
<body>
<div date-role="page" id="main">
<div class="page_link">
page 1
</div>
<div class="page_link">
page 2
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 1">
<div class="page_link">
main
</div>
<div class="page_link">
page 2
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 2">
<div class="page_link">
main
</div>
<div class="page_link">
page 1
</div>
<div class="page_link">
page 3
</div>
</div>
<div date-role="page" id="page 3">
<div class="page_link">
main
</div>
<div class="page_link">
page 1
</div>
<div class="page_link">
page 2
</div>
</div>
</body>
</html>
**end ALL_PAGES.PHP **
I want to break away from this multi-page setup on one php file, and move to a setup where each page is a separate php file. To accomplish this I took the html from each page and moved it to its own php page. Then I added href links in replace of the mobile.change() functions I used for the "page_link" classes.
**MAIN.PHP**
<html>
<head>
external css and js files
</head>
<body>
<div date-role="page" id="page 1">
<a href="/main.php">
main
</a>
<a href="/page_2.php">
page 2
</a>
<a href="/page_3.php">
page 3
</a>
</div>
</body>
</html>
**end MAIN.PHP**
**PAGE_1.PHP**
<div date-role="page" id="page 1">
<a href="/main.php">
main
</a>
<a href="/page_2.php">
page 2
</a>
<a href="/page_3.php">
page 3
</a>
</div>
**end PAGE_1.PHP**
**PAGE_2.PHP**
<div date-role="page" id="page 2">
<a href="/main.php">
main
</a>
<a href="/page_1.php">
page 1
</a>
<a href="/page_3.php">
page 3
</a>
</div>
**end PAGE_2.PHP**
**PAGE_3.PHP**
<div date-role="page" id="page 3">
<a href="/main.php">
main
</a>
<a href="/page_1.php">
page 1
</a>
<a href="/page_2.php">
page 2
</a>
</div>
**end PAGE_3.PHP**
The site works fine except when the user hits the refresh button in the browser. When that happens each page loses access to any external css and js files located on the main page. I am fairly new to JQM so any advice would be helpful.
