[SOLVED] Problem with JQuery Dynamic Header
Hi. I've been racking my head with this for too long now, and was wondering if someone could point out my mistakes. Basically, I have two pages that are identical except for a string in the content. There is a header, that I want to dynamically display the page title. For the first one, it should say "Overview" on the header bar when it loads, and the second page should say "Accounts" when it loads. What happens, is that the page that get's loaded first will display the header correctly, the one I click to second, will not display the header with the proper text at all. I've only included one of these pages, as they're identical except for a string or two:
***** navMenu.html *****
- <div data-role="header" data-theme="a" >
- <a href="#nav-menu-panel" data-icon="grid" data-iconpos="notext">Menu</a>
- <a href="#login-form" data-icon="in" data-iconpos="notext">Log In</a>
- <h1 id="pageTitle"></h1>
- </div><!-- /header -->
***** appOverview.php *****
There is a second page identical to this that I didn't include here. The only difference is in the content, it says "Accounts" and the header <h1> should be "Accounts" instead of "Overview"
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jcBook</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <link rel="stylesheet" href="style/swipe-page.css" id="demo-style">
- <link rel="stylesheet" href="style/default.css" >
- <script>
- // Bind to "mobileinit" before you load jquery.mobile.js
- // Set the default transition to slide
- $(document).on( "mobileinit", function() {
- $.mobile.defaultPageTransition = "slide";
- });
- </script>
- <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
- <script src="js/swipe-page.js"></script>
- </head>
- <body>
- <div data-role="page" id="appOverview" class="demo-page ui-responsive-panel" data-dom-cache="true" data-theme="a" data-next="appAccounts">
- <?php include("navMenu.html"); ?>
- <div data-role="content" data-theme="e">
- <p>Overview</p>
- </div><!-- /content -->
- <div data-role="footer" >
- </div><!-- /footer -->
- <?php include("navMenuPanel.html"); ?>
- <script>
- /***** This is where it should update the <h1> in the "NavMenu" ******/
- $(function() {
- var pTitle = "Overview";
- $("#pageTitle").text(pTitle);
- });
- </script>
- </div><!-- /page -->
- </body>
- </html>