Jquery mobile page structure
Posted
by
Die 20
on Stack Overflow
See other posts from Stack Overflow
or by Die 20
Published on 2013-10-22T21:51:38Z
Indexed on
2013/10/22
21:53 UTC
Read the original article
Hit count: 233
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.
© Stack Overflow or respective owner
