So, this question exists $.mobile.changePage in jQuery Mobile - update visible URL? but it does not address my issue.
I am developing a fairly large JQM site with PHP and MySQL but I've hit some limitations with my understanding of JQM.
So what's happening? Well (looking at the last block of code in my post), navigating to page1.html and then selecting page2.html from the dropdown only changes #p to "page2.html" and does not update the pages Header, Content or Footer from "1" to "2".
I've done what I thought was turning off ajax, but it still appends #page2.html to the URL...
I've been reading JQM Docs and searching Google for 2 days. I've had absolutely no luck when it comes to this and I appreciate any insight you may have.
The following code works perfectly (and I apologize for posting the entire HTML here... I don't have access to pastebin at the moment), page transitions occur beautifully, but it does not suit my needs because I have need for approximately 40 pages and putting them all in one file with all the MySQL calls would be crazy, especially since users may only use 10 of those pages in a session making the loading of the other 30 pointless, time and data consuming.
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function(e) {
$("#nav").on("change", function(e) {
$.mobile.changePage($(this).val());
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 1</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 1</h1>
<select id="nav" data-native-menu="false">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
<div id="page2" data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 2</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 2</h1>
<select id="nav" data-native-menu="false">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
As I said, what I'm developing will be fairly large so to allow linking and to keep myself sane when it comes to creating and editing in the future, I require each page to be in its own PHP file.
I mocked up an example of my expected outcome for each page:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
});
$(document).bind("pageinit", function(e) {
$("#nav").on("change", function(e) {
$("#p").html($(this).val());
$.mobile.changePage($(this).val());
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 1</p>
<div id="p">placeholder</div>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 1</h1>
<select id="nav" data-native-menu="false">
<option value="">SELECT</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
And page2.html is the exact same as page1.html except it has Header, Content and Footer with a "2" instead of the "1".
On another note, a login is required for this site. Upon successful login at index.php (with a form that submits to itself) PHP uses a header() to redirect to an inner page (let's say inner.php). But after this redirect and the user is showing content from inner.php, the URL still shows index.php.
So whether I use AJAX or PHP to change pages, the URL never updates...
You can use an html5 specification for history : windowhistory.replaceState(stateObj, "page 2", "bar.html"); Informations by Mozilla : https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history